如何使用React Native在控制台中打印状态？

Question

export default class App extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      petname: '',
      owner: ''
    };
  }

  addPet() {
    console.log("Button Pressed");
    console.log(this.state.petname);
    return (
      //some logic
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputStyle}>
          <Text>Pet</Text>
          <TextInput onChangeText={petname =>                                 this.setState({petname})} style={{width:100}} />
        </View>
        <View style={styles.inputStyle} >
          <Button title="Add Pet" onPress={this.addPet} />
        </View>
      </View>
    )
  }
}

Answer 1

函数无法访问此。您可以将此与OnPress上的函数绑定，也可以在构造函数中编写以下内容。

this.addPet = this.addPet.bind(this);

比较第一个和第二个选项，第二个选项更好，因为它不是每次都创建一个新实例。

最好的选择是使用箭头函数（一个ES6特性）。考虑下面的示例。

javascript prettyprint-override">addPet = () => {
  // Your awesome logic goes here
}