this.state 在react-native的 onPress 事件期间未定义

IT技术 javascript reactjs
2021-05-21 22:33:11

你好，我是 React Native 的新手，我的代码是： 

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

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

1个回答

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

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

ES6 类失去了您可能已经习惯使用 es5 react.createClass 的自动绑定。在 React 组件中使用 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 构建的react-native init或create-react-native-app应该做的），你可以使用这个表示法来自动绑定使用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 功能（如果可用）或绑定到您的构造函数中。出于性能原因，使用匿名函数onPress={() => this.onPress()} 或onPress={this.onPress.bind(this)}直接在您的匿名函数上使用Button要少得多。

其它你可能感兴趣的问题
上一篇React Hooks 滚动到元素 下一篇Multipart 3mf 文件，需要提取其中一个部分进行打印。