Reactjs this.setState 未定义

发布于08月30日

I keep seeing answers that say to use => or .bind(this) but neither of those solutions worked.

import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export default class MyWeatherApp extends Component {
  constructor(props) {
  super(props);

  this.state = {};
}

getInitialState() {
  return {
    zip: '',
    forecast: null,
  };
}

_handleTextChange(event) {
  var zip = event.nativeEvent.text;
  this.setState({zip: zip});
}

解决方案:

_handleTextChange = (event) => {
  var zip = event.nativeEvent.text;
  this.setState({zip: zip});
  alert('click');
}

推荐答案

使用ES2015类语法时，需要将动作处理程序绑定到类的上下文.

试试这个:onChange={e => _handleTextChange(e)}

一般来说，最好不要在render中使用箭头函数或bind个方法，因为它会在任何render调用中生成函数的新副本.将函数声明移到class constructor.

我个人更喜欢在这种情况下使用箭头函数作为类属性

class MyClass extends React.Component {

  handleClick = () => {
    // your logic
  };

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

它不是ES2015规范的一部分，但babel stage-0 preset支持这种语法

您可以在React in this article中阅读有关上下文绑定的更多信息