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>你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。
这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。
而这一点也很好理解，React并没有做向Vue这方面的处理，它是直接调用完，将返回值绑定给了onClick。所以这里我们要记住，事件绑定的时候，一定要绑定的是一个函数。
OK，现在了解了问题所在，如果我想在调用方法的时候传递参数，应该怎么做呢？
1.箭头函数
第一个方法，如果我们在给按钮绑定事件的时候，外层绑定的是一个箭头函数，里面才是我们写的方法，似乎就能完美的解决问题了：
speak = (value) =>{
alert(value)
}
<button onClick={() => {this.speak('qnmlgbd')}}>说话</button>通过箭头函数的方式，直接给onClick绑定的就是我们定义的speak方法，并且传递好了参数。
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>
)
}
}到此这篇关于React事件处理过程中传参的实现方法的文章就介绍到这了,更多相关React事件处理 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
react-router v4如何使用history控制路由跳转详解
这篇文章主要给大家介绍了关于react-router v4如何使用history控制路由跳转的相关资料，文中通过示例代码介绍的的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
本篇文章主要介绍了浅谈React和Redux的连接react-redux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
Zustand 是一个非常轻量、简洁的状态管理库,旨在为 React 提供简便且高效的状态管理,相比于 Redux 或 Context API,Zustand 具有更简洁、灵活和易于理解的优点,感兴趣的朋友一起看看吧2024-12-12
在 react 中,如果我们想控制子组件的显示和隐藏一般有两种方式,一种是父组件维护子组件显示隐藏状态,另一种则是通过 forwardRef 直接设置子组件的状态进行维护,这两种方式各有优缺点,以及对于不同的使用场景不同,今天我们就来简单讨论下,需要的朋友可以参考下2025-04-04
这篇文章主要为大家介绍了React中useLayoutEffect钩子使用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了React 数据获取与性能优化方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家介绍了React setState是异步还是同步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在 React 应用开发中,根据组件的状态（state）、属性（props） 或外部数据来动态改变其外观是一项极其常见的任务,本文将全面、深入地探讨在 React 项目中动态切换样式的各种方法,从基础到高级,并提供大量代码示例和最佳实践,需要的朋友可以参考下2025-09-09
本文主要介绍了React-router v6 实现登录验证流程，主要介绍了公共页面、受保护页面和登录页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家介绍了React的createElement方法源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论