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 组件中使用 JSON 数据,有多种方法,这篇文章主要为大家详细介绍了五个常见的方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下2024-01-01
react-native ListView下拉刷新上拉加载实现代码
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
React Native 集成jpush-react-native的示例代码
这篇文章主要介绍了React Native 集成jpush-react-native的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了React的Hook，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
本篇文章主要介绍了react router 4.0以上的路由应用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Docker部署SpringBoot项目到云服务器的实现步骤
Docker作为一种轻量级的容器化技术，为开发者提供了快速、便捷的部署方案，本文主要介绍了Docker部署SpringBoot项目到云服务器，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
React钩子函数之useDeferredValue的基本使用示例详解
useDeferredValue是React 18中非常有用的一个钩子函数，它可以帮助我们优化渲染性能，并让UI更加流畅，如果你还没有尝试过它，不妨在你的下一个React项目中试一试，这篇文章主要介绍了React钩子函数之useDeferredValue的基本使用,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了详解React native fetch遇到的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了React中setState的异步操作案例详解，文章围绕主题展开详细的内容介绍，具有一点点参考价值，感兴趣的小伙伴可以参考一下2022-08-08
本篇文章主要介绍了React-router v4 路由配置方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论