本博客详细介绍React点击事件的参数传输问题。
最近开始使用一些react开发,作为一个初学者还是有点头疼的。
碰到一个问题就是,点击事件如何传参?
(一)问题描述
先来看一下问题的描述吧。如下图:
那么我该怎么解决这个问题呢?
(二)需要用到的知识
愚蠢的自己尝试了很多种愚蠢的方法。废话就不多说,具体看看代码吧。
//这是html的结构样式
//clickFunction--点击事件函数,params--要传递的参数
<div onClick={this.clickFunction.bind(this, params)>收</div>
----------
//函数接收参数方式
//params--函数接受的参数
clickFunction(params, event) {
console.log('thisStatus', params, event);
}
// 或者直接这样也可以:
clickFunction(params) {
console.log('thisStatus', params);
}
明白吧?
OK。
来解决开头我提出的问题,同样,看图片吧。
(三)解决 所描述的问题
这样就可以了。
(四)总结
如果上面看得眼花了,没关系。看下面这一行代码就够了。(原谅我的啰嗦)
this.handleclick.bind(this,要传的参数) handleclick(传过来的参数,event)
事件–this.handleclick.bind(this,要传的参数)
函数–handleclick(传过来的参数,event)/ handleclick(传过来的参数)
ok!