javascript - 对绑定(bind)的工作原理感到困惑

Question

这个问题已经有答案了:

ReactJS bind(this) (2 个回答)

Why is JavaScript bind() necessary? (4 个回答)

已关闭 5 年前。

我对绑定(bind)的工作原理有一些了解，但在我的组件中我使用 this很多，我对 .bind(this) 正在做什么以及它如何与 onClick 和 onChange 交互感到有点困惑。我知道this.addTodo指的是 TodoInput类

class TodoInput extends Component {
constructor(props) {
super(props);

this.state = {
  value: 'test',
};

this.handleChange = this.handleChange.bind(this);
this.addTodo = this.addTodo.bind(this);
}

handleChange(e) {
console.log('CHANGE HERE');
}

addTodo(todo) {
 console.log('TODO:', todo);
}

render() {
 return (
   <div>
    <input type="text" value="" onChange={this.handleChange} />
    <button className="btn btn-primary" onClick={() => this.addTodo(this.state.value)}>Submit</button>
  </div>
);
  }
}

Answer 1

当您通过引用传递实例方法时，上下文将丢失。通过将其显式绑定(bind)到当前实例，您可以安全地通过引用传递它，同时保持 this

的值