在本地反应中的onPress事件期间，this.state未定义 [英] this.state is undefined during onPress event in react native

问题描述

你好我是反应原生的新人，我的代码是：

Hello i new in react native, my code is:

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);
  }
}

当我填写此表格并按下登录时，我有此错误消息：无法读取未定义的属性'电子邮件'。
感谢您的帮助！

When i fill this form and press sign in, i have this error message: "Cannot read property 'email' of undefined". Thank you for the help!

推荐答案

这是一个约束性问题。最简单的解决方案是更改按钮标签的JSX，如下所示：

This is a binding issue. The simplest solution will be to change your JSX for the button tag like so:

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

ES6类失去了你可能习惯使用es5 react.createClass的自动绑定。当使用ES6作为反应组件时，你必须更加清楚你的绑定。

ES6 classes lose the autobinding you may have been used to with es5 react.createClass. You have to be more conscious of your binding when using ES6 for react components.

另一种选择是在你的构造函数中绑定方法，如下所示：

Another option is to bind the method in your constructor like so:

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

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

或者您甚至可以使用胖箭头es6语法函数来维护与您正在创建的组件的this绑定：

Or you could even utilize a fat arrow es6 syntax function to maintain the 'this' binding to the component you're creating:

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

更新：

再次更新，如果你的环境支持一些ES7功能（我认为反应原生于 react-native init 或 create-react-native-app shoudl do）您可以使用此表示法自动绑定使用此关键字的类方法。

To update this again, if your environment supports some ES7 features (which I believe react-native built from react-native init or create-react-native-app shoudl do) you can use this notation to auto-bind your class methods that utilize the this keyword.

// 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功能（如果有）或绑定在你的构造函数。使用匿名函数 onPress = {（）=> this.onPress（）} 或 onPress = {this.onPress.bind（this）} 直接在按钮因性能原因而不太有利。

The best options are to use the ES7 feature if available or to bind in your constructor. Using an anonymous function onPress={() => this.onPress()} or onPress={this.onPress.bind(this)} directly on your Button is much less favorable for performance reasons.

这篇关于在本地反应中的onPress事件期间，this.state未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！