this.method.bind（this）的用法是什么

Question

我正在研究Reactjs，并有如下代码块：

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;

单击按钮后，将显示“ setState ...”字符串。但是我不明白this.setStateHandler.bind(this);函数的用法。谁能为我解释一下？

Answer 1

this.setStateHandler().bind(this)将函数的上下文设置为setStateHandler()类对象。这是必需的，以便您可以this.setState({...})在方法内部进行调用，因为setState()是的方法React.Component。如果您不这样做.bind(this)，则会收到错误消息，该setState()方法未定义。