Javascript 对bind的工作原理感到困惑

我对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>
);
  }
}

类TodoInput扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“测试”，
};
this.handleChange=this.handleChange.bind（this）；
this.addTodo=this.addTodo.bind（this）；
}
手变（e）{
log（'CHANGE HERE'）；
}
添加todo（todo）{
log（'TODO:'，TODO）；
}
render（）{
返回(
this.addTodo（this.state.value）}>Submit
);
}
}

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

this

的值，并且通过实例，它引用的是类组件，对吗？因为我将函数绑定到组件，所以每次使用handleChange或addTodo时，它的行为就像

new HandleCharge

或``new addTodo``我在youtube视频上看到了规模小得多的绑定示例，但与此不同。