Question

我正在学习ReactJS并且我已经看到了许多可用的答案，但我无法理解为什么在下面给出的代码中使用了this.setStateHandler = this.setStateHandler.bind(this);？为什么我们不能简单地在按钮点击时调用setStateHandler函数而没有在构造函数中编写的这行代码（正如我们通常在其他编程语言中那样）？请用简单的术语解释。

代码

import React from 'react';

class App extends React.Component {
   constructor() {
      super();

      this.state = {
         data: []
      }

      this.setStateHandler = this.setStateHandler.bind(this);
   };

   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data;
      myArray.push(item)
      this.setState({data: myArray})
   };

   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}

export default App;

Answer 1

如果您需要使用任何方法或属性，则需要将

上下文属性this设置为指向您的实例

默认情况下，普通的DOM事件处理函数会使用this作为触发事件的元素。在react + strict模式下，this可以是undefined，因此异常'setState' of undefined is not a function，除非你bind它到实例或在箭头函数中调用它（保持上下文）< / p>

所以要么做你做的事情，要么：

// arrow keeps context
onClick={e => this.handleClick(e)}
// experimental / proposal
onClick={::this.handleClick}

// needs class properties transform, binds to instance via arrow
handleClick = event => {
  // stuff on this, then just onClick={this.handleClick}
}

这必须是此标签上最常见的问题......

请记住，许多方法都涉及在每个render(){}中动态创建一个新函数，这会带来性能成本 - 所以您的方法是首选或类属性转换（这样做）

请参阅How can I tell when this.setState exists in ES6?等

无法理解ReactJS

1 个答案: