React Native中onPress内变量比较问题：PIN修改时this.state未定义

嘿，这个问题我刚学React Native的时候也踩过坑！核心原因是类组件里的普通方法不会自动绑定this，导致你在onPressButton里访问this.state时，this的指向根本不是组件实例，自然就报“未定义”错误啦。

不过别担心，有几种简单的解决办法，都很适合新手：

解决方法1：把onPressButton改成箭头函数 #

箭头函数会自动捕获当前上下文的this（也就是你的SettingScreen组件实例），这样就能正常访问this.state了，这也是最推荐的写法：

class SettingScreen extends Component {
  state = { oldpin: '000000', newpin: '', secpin: '' }
  
  // 改成箭头函数形式
  onPressButton = () => {
    if( this.state.newpin == this.state.secpin){
      ToastAndroid.show("Password Changed", ToastAndroid.SHORT);
      this.setState({ oldpin : this.state.newpin})
    } else {
      ToastAndroid.show("Password Unmatched", ToastAndroid.SHORT);
    }
  }
  
  handleNewPin = (text) => { this.setState({ newpin: text }) }
  handleSecPin = (text) => { this.setState({ secpin: text }) }
  
  // ... 其他组件代码
  <TextInput onChangeText={this.handleNewPin} />
  <TextInput onChangeText={this.handleSecPin} />
  <TouchableOpacity onPress={this.onPressButton}>
    <Text> Change Password </Text>
  </TouchableOpacity>
}

解决方法2：在构造函数里手动绑定this #

如果你习惯用普通函数写法，可以在构造函数里手动把this绑定到方法上：

class SettingScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { oldpin: '000000', newpin: '', secpin: '' };
    // 手动绑定this到方法
    this.onPressButton = this.onPressButton.bind(this);
  }
  
  onPressButton(){
    if( this.state.newpin == this.state.secpin){
      ToastAndroid.show("Password Changed", ToastAndroid.SHORT);
      this.setState({ oldpin : this.state.newpin})
    } else {
      ToastAndroid.show("Password Unmatched", ToastAndroid.SHORT);
    }
  }
  
  handleNewPin = (text) => { this.setState({ newpin: text }) }
  handleSecPin = (text) => { this.setState({ secpin: text }) }
  
  // ... 其他组件代码
}

解决方法3：在调用时临时绑定this #

直接在onPress属性里用bind绑定，不过这种方式每次组件渲染都会创建新的函数实例，小组件里影响不大，但大型组件可能有轻微性能损耗：

<TouchableOpacity onPress={this.onPressButton.bind(this)}>
  <Text> Change Password </Text>
</TouchableOpacity>

顺便提一句：你写的handleNewPin和handleSecPin没问题，正是因为用了箭头函数，this已经正确绑定到组件实例，所以能正常获取用户输入的PIN码~

内容的提问来源于stack exchange，提问作者DMC EXC