如何实现React事件处理中长尾参数传递的方法？

本文共计948个文字，预计阅读时间需要4分钟。

目录+摘要+1. 箭头函数+2. 函数柯里化+3. bind方法+摘要+首先，我们知道在React中，是通过小驼峰式给元素绑定事件：+fn=()=> { // 执行代码 }+button onClick={this.fn}+111+/button+但如果有Vue的基础，可直接使用：+fn=()=> { // 执行代码 }+button @click=fn+111+/button+

目录

• 摘要
• 1.箭头函数
• 2.函数柯里化
• 3.bind方法

摘要

首先我们知道，在React中，是通过小驼峰式给元素绑定事件：

fn = ()=>{ //执行代码 } button onClick={this.fn}>111</button>

但是如果有Vue的基础，可以很清楚的看到二者的区别。在Vue中，我们可以直接给fn传递参数。

但是如果在React中我们这么做：

fn = (value)=>{ //执行代码 console.log(value) } button onClick={this.fn('2222')}>111</button>

你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。

这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。

而这一点也很好理解，React并没有做向Vue这方面的处理，它是直接调用完，将返回值绑定给了onClick。