为什么以及何时需要在React中绑定函数和eventHandlers？
class SomeClass extends Component{ someEventHandler(event){ } render(){ return <input onChange={------here------}> } } 我看到------here------部分的不同版本。
// 1 return <input onChange={this.someEventHandler.bind(this)}> // 2 return <input onChange={(event) => { this.someEventHandler(event) }> // 3 return <input onChange={this.someEventHandler}>
这些版本有什么不同？ 还是只是一个偏好问题？
谢谢大家的回答和意见。 所有这些都是有帮助的，我强烈build议阅读这个链接第一，如果你对我感到困惑。
http://blog.andrewray.me/react-es6-autobinding-and-createclass/
每个都是不同的，这取决于你的组件是如何设置的
首先 。 .bind(this)用于将你的上下文绑定到你的组件函数。 React ES6类不会自动绑定上下文，因此您必须显式绑定。 有几种方法可以做到.bind(this)是一种方法。 如果你不想使用这种方法，你也可以
一个。 在你的构造函数中做绑定。 又名
class SomeClass extends Component{ constructor(){ super(); this.someEventHandler = this.someEventHandler.bind(this); } someEventHandler(event){ } .... }
或者b。 使你的自定义function在类的胖箭头function。 又名
class SomeClass extends Component{ someEventHandler = (event) => { } .... }
这一切都处理这个上下文绑定。
第二 。 onChange={(event) => { this.someEventHandler(event) }使用内联lambda（胖箭头）函数来包装组件处理函数，该函数可以提供一些额外的function。 可以说，你想发送一个额外的参数给你的函数，这是一个方法来实现这一点。
<input onChange={(event) => { this.someEventHandler(event, 'username') }>
如果需要，这将是一种将附加parameter passing给处理函数的方法。
第三 。 您只是将该函数作为callback函数传递，以在点击事件发生时触发，而不需要其他参数
总结。 这三个例子都与传递一个处理函数到一个点击事件有关。但是你可以添加不同的东西。 首先是关于你的this背景。 第二个是关于如何将parameter passing给你的处理函数。
为什么绑定一个React函数？
当你使用ES6类定义一个组件时，一个常见的模式是一个事件处理器成为这个类的一个方法。 在JavaScript中，类方法默认没有绑定。 如果您忘记bind this.someEventHandler并将其传递给onChange ，则在实际调用该函数时这将是未定义的。
一般来说，如果你在它之后引用一个没有()的方法，比如onChange={this.someEventHandler} ，你应该绑定那个方法。
有三种方法将onChange函数绑定到正确的上下文
第一
return <input onChange={this.someEventHandler.bind(this)}>
在这个例子中，我们明确地使用bind来使onChange事件作为eventHandler的参数。 我们也可以发送一些其他的参数，types的语法
return <input onChange={this.someEventHandler.bind(this, state.value)}>
第二
return <input onChange={(event) => { this.someEventHandler(event) }>
这是一个ES6语法，我们可以指定我们想要传递给someEventHandler函数的参数。 这相当于.bind(this)但它也使我们能够灵活地发送其他属性和事件一样
return <input onChange={(event, value) => { this.someEventHandler(event, value) }>
第三
return <input onChange={this.someEventHandler}>
在这个方法中，事件直接附加到someEventHandler函数。 没有其他参数可以这样传递
