在本地反應中的onPress事件期間，this.state未定義

Question

你好我是新的反應本機，我的代碼是：

 import React, { View, Text, TextInput, Component } from 'react-native'; import Style from './styles/signin'; import Button from '../common/button'; export default class SignIn extends Component { constructor(props) { super(props); this.state = { email: '', password: '' }; } render(){ return( <View style={Style.container}> <Text style={Style.label}>Email</Text> <TextInput style={Style.input} onChangeText={(text) => this.setState({email: text})} value={this.state.email} /> <Text style={Style.label}>Password</Text> <TextInput style={Style.input} onChangeText={(text) => this.setState({password: text})} value={this.state.password} secureTextEntry={true} /> <Button text={'Sign in'} onPress={this.onPress}/> </View> ); } onPress(){ console.log(this.state.email); } } 

當我填寫此表單並按下登錄時，我有此錯誤消息：“無法讀取未定義的屬性'電子郵件'”。 感謝您的幫助！

Answer 1

這是一個約束性問題。 最簡單的解決方案是更改按鈕標記的JSX，如下所示：

<Button text={'Sign in'} onPress={this.onPress.bind(this)} />

ES6類失去了你可能習慣使用es5 react.createClass的自動綁定。 當使用ES6作為反應組分時，您必須更加意識到您的綁定。

另一種選擇是在構造函數中綁定方法，如下所示：

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: ''
    };

    this.onPress = this.onPress.bind(this)
  }

或者您甚至可以使用胖箭頭es6語法函數來維護與您正在創建的組件的“this”綁定：

<Button text={'Sign in'} onPress={() => this.onPress()} />

更新：

要再次更新，如果您的環境支持某些ES7功能（我相信本身是使用react-native init或create-react-native-app shoudl構建的），您可以使用此表示法自動綁定使用的類方法this關鍵字。

// This is auto-bound so `this` is what you'd expect
onPress = () => {
    console.log(this.state.email);
};

代替

// This is not auto-bound so `this.state` will be `undefined`
onPress(){
  console.log(this.state.email);
}

最好的選擇是使用ES7功能（如果可用）或在構造函數中綁定。 直接在Button上使用匿名函數onPress={() => this.onPress()}或onPress={this.onPress.bind(this)}對於性能原因不太有利。