首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用ES6语法通过onclick事件传递参数

使用ES6语法通过onclick事件传递参数
EN

Stack Overflow用户
提问于 2015-12-18 16:04:19
回答 6查看 164.6K关注 0票数 101

如何使用ES6语法向onClick事件传递额外的参数?

例如:

代码语言:javascript
复制
handleRemove = (e) => {

}

render() {
     <button onClick={this.handleRemove}></button>
}

我想将id传递给handleRemove函数,如下所示:

代码语言:javascript
复制
<button onClick={this.handleRemove(id)}></button>
EN

回答 6

Stack Overflow用户

发布于 2017-08-26 06:30:19

使用value attribute元素的按钮传递id,如下所示

代码语言:javascript
复制
<button onClick={this.handleRemove} value={id}>Remove</button>

然后在handleRemove中,从event中读取值为:

代码语言:javascript
复制
handleRemove(event) {
...
 remove(event.target.value);
...
}

这样就避免了每次重新呈现该组件时创建新函数(与使用箭头函数相比)。

票数 54
EN

Stack Overflow用户

发布于 2015-12-18 16:07:17

如下所示使用Arrow函数:

代码语言:javascript
复制
<button onClick={()=>{this.handleRemove(id)}}></button>
票数 33
EN

Stack Overflow用户

发布于 2016-09-16 22:18:44

代码语言:javascript
复制
onClick={this.handleRemove.bind(this, id)}

使用with with函数

代码语言:javascript
复制
onClick={()=>{this.handleRemove(id)}}
票数 17
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34350988

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档