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>
)
}
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgagfah
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01