this.setState 未定义

Question

我不断看到使用 => 或 .bind(this) 的答案，但这些解决方案都没有奏效。

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

原文由 Natus Drew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

试试这个： 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 预设 支持这种语法

您可以在 本文 中阅读更多关于 React 中的上下文绑定的信息

原文由 Dmitriy Nevzorov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

让我详细写一下。因为我不得不浪费很多时间来研究它而且我不想让任何人重复这个……

如果您不使用箭头功能，则必须绑定 this 就像第 9 行

class MyClass extends React.Component {

  handleButtonClick(){
    console.log("Hello from here");
  };

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

另一种方法是使用 ES6 箭头函数。在这种情况下，您无需绑定“this”。安装“babel stage-1 preset”将支持这一点。

在您的项目中运行以下命令：

npm i babel-preset-stage-1 --save

你的 .babelrc 看起来像这样。特别是预设中的“stage-1”。

 {
  "presets": ["es2015", "react", "stage-1"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    }
  }
}

正如我所说，您的组件将是这样的：

 class MyClass extends React.Component {

      handleButtonClick = () => {
        console.log("Hello from here");
      };

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

原文由 Shuvo Habib 发布，翻译遵循 CC BY-SA 3.0 许可协议