为什么和何时我们需要绑定函数和事件处理程序的反应？

Question

为什么和何时我们需要绑定函数和事件处理程序的反应？

class SomeClass extends Component{
  someEventHandler(event){
  }
  render(){
    return <input onChange={------here------}>
  }}

我看到不同版本的------here------部分。

// 1return <input onChange={this.someEventHandler.bind(this)}>// 2return <input onChange={(event) => { this.someEventHandler(event) }>// 3return <input onChange={this.someEventHandler}>

版本有什么不同？还是只是偏好的问题？

---

谢谢大家的回答和评论。所有这些都是有帮助的，我强烈建议阅读这个链接。第一如果你和我一样对此感到困惑的话。
http：/blog.andreurey.me/React-ES6-autobinding-andcreateclass/

Answer 1

绑定不是特定的反应，而是如何反应。this在Javascript工作。每个函数/块都有它自己的上下文，对于函数来说，它更具体的是如何调用它。反应小组决定this不绑定类上的自定义方法(也不是类的内置方法，如componentDidMount)时，添加ES6支持(类语法)。当您应该绑定上下文时，取决于函数的用途，如果您需要访问类中的道具、状态或其他成员，则需要绑定它。对于您的示例，每一个都是不同的，这取决于您的组件是如何设置的。第一.&nbsp;.bind(this)用于将此上下文绑定到组件函数。如果您不想绑定该函数的每次使用(如在单击处理程序中)，则可以通过以下任一方法预绑定该函数。在构造函数中做绑定。阿卡class&nbsp;SomeClass&nbsp;extends&nbsp;Component{ &nbsp;&nbsp;&nbsp;&nbsp;constructor(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.someEventHandler&nbsp;=&nbsp;this.someEventHandler.bind(this); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;someEventHandler(event){ &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;....}或者B.使您的自定义函数在类FAT箭头函数上。阿卡class&nbsp;SomeClass&nbsp;extends&nbsp;Component{ &nbsp;&nbsp;&nbsp;&nbsp;someEventHandler&nbsp;=&nbsp;(event)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;....}所有这些都涉及到这个上下文绑定。第二.&nbsp;onChange={(event) => { this.someEventHandler(event) }是用内联lambda(FAT箭头)函数包装组件处理程序函数，该函数可以提供一些附加功能。假设您想要向您的函数发送额外的Param，这是实现该功能的一种方法。<input onChange={(event) => { this.someEventHandler(event, 'username') }>如果需要，这将是向处理程序函数传递附加参数的一种方法。第三..您只是将函数作为回调函数传递，以便在发生单击事件时触发，而不需要附加参数。总结一下。这三个示例都与将处理程序函数传递给单击事件有关。然而，有不同的东西，你可以添加到这一点。第一个是关于你的this背景。第二个问题是如何将参数传递给处理程序函数。