什么是: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;

单击按钮后，将出现"设置状态"字符串。但是我不了解this.setStateHandler.bind(this);功能的用法。有人可以为我解释吗？

Answer 1

this.setStateHandler().bind(this)将函数 setStateHandler()的上下文设置为类对象。这是必要的，以便您可以在方法内调用this.setState({...})，因为setState()是React.Component的方法。如果您不.bind(this)，您会发现setState()方法不确定的错误。