reactjs - : this. method.bind(this)有什么用

Question

这个问题在这里已经有了答案:





What is the use of the JavaScript 'bind' method?

(22 个回答)


5年前关闭。




我正在研究 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()方法未定义。