React：了解事件处理过程中传参的实现方法
摘要
首先，我们知道，在React中，元素是通过小驼峰绑定的:
fn = ()=>{
//执行代码
}
button onClick={this.fn}>111</button>
但是如果有Vue的基础，我们可以清楚地看到两者之间的区别。在Vue中，我们可以直接将参数传递给fn。
但如果我们在React中这样做：
fn = (value)=>{
//执行代码
console.log(value)
}
button onClick={this.fn('2222')}>111</button>
当页面加载时，你会发现222已经打印出来了。但是点击按钮没有效果。
这表明该方法没有绑定到按钮上，而是在按钮加载时直接调用。
这也很容易理解。React没有处理Vue。它直接调用并将返回值绑定到onclick。因此，我们应该记住，当事件被绑定时，必须绑定一个函数。
OK，现在我明白了问题。如果我想在调用方法时传递参数，我该怎么办？
1.箭头函数
第一种方法是，如果我们在按钮绑定事件时将箭头函数绑定到外层，那么我们的写作方法似乎可以完美地解决问题：
speak = (value) =>{
alert(value)
}
<button onClick={() => {this.speak('qnmlgbd')}}>说话</button>
我们定义的speak方法是通过箭头函数直接绑定到onclick，并传递参数。
2.函数柯里化
如果箭头函数可以的话，似乎我们可以直接在方法中返回一种方法，没有问题。
say = (value)=>{
return ()=>{
alert(value)
}
}
<button onClick={this.say('qnmlgbd')}>说话</button>
这样，当我们绑定onclick时，我们就不用写箭头函数了，这样看起来更好。但原理和刚才的方式是一样的。
3.bind方法
众所周知，bind方法是改变方法的this方向，返回方法是一种方法。不会直接调用。
OK，如果bind有这个特点，我们可以用它来解决这个问题。
loud(value){
alert(value)
}
<button onClick={this.loud.bind(this,'qnmlgbd')}>说话</button>
在这里，我们可以注意到loud方法在定义时没有使用箭头函数。前两种方法在定义时使用箭头函数。
这是因为，在React中，如果定义函数不使用箭头函数，则函数中的this将是绑定事件的元素，而不是React组件。但是，如果事件是通过bind绑定的，则无需考虑此问题。
最后，让我们总是看看这三种方法的区别：
export default class Child extends Component {
say = (value)=>{
return ()=>{
alert(value)
}
}
speak = (value) =>{
alert(value)
}
loud(value){
alert(value)
}
render() {
return (
<div>
<button onClick={this.say('qnmlgbd')}>说话</button>
<button onClick={() => {this.speak('qnmlgbd')}}>说话</button>
<button onClick={this.loud.bind(this,'qnmlgbd')}>说话</button>
</div>
)
}
}
