通过使用ES6语法的onclick事件来响应传递参数

如何使用ES6语法将附加parameter passing给onClick事件？

例如：

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

我想传递一个id给handleRemove函数，像这样：

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

Answer 1

请记住，在onClick={ ... } ， ...是一个JavaScriptexpression式。 所以

 ... onClick={this.handleRemove(id)} 

是相同的

 var val = this.handleRemove(id); ... onClick={val} 

换句话说，你立即调用this.handleRemove(id) ，并将该值传递给onClick ，这不是你想要的。

相反，你想创build一个新的函数，其中一个参数已经被预先填充了。 基本上，你需要以下内容：

 var newFn = function() { var args = Array.prototype.slice.call(arguments); // args[0] contains the event object this.handleRemove.apply(this, [id].concat(args)); } ... onClick={newFn} 

有一种方法可以在ES5 JavaScript中expression： Function.prototype.bind 。

 ... onClick={this.handleRemove.bind(this, id)} 

如果您使用React.createClass ，React会自动为您绑定实例方法，除非将其更改为this.handleRemove.bind(null, id)否则可能会投诉。

你也可以直接定义函数内联; 如果您的环境或转译器支持它，则使用箭头函数缩短这个时间：

 ... onClick={() => this.handleRemove(id)} 

如果您需要访问该事件，则可以将其传递给：

 ... onClick={(evt) => this.handleRemove(id, evt)} 

Answer 2

使用这样的箭头function：

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

Answer 3

 onClick={this.handleRemove.bind(this, id)} 

Answer 4

到目前为止没有人提到的是使handleRemove返回一个函数。

你可以做一些事情：

 handleRemove = id => event => { // Do stuff with id and event } // render... return <button onClick={this.handleRemove(id)} /> 

然而，所有这些解决scheme都有在每个渲染上创build新function的缺点。 最好为Button创build一个新组件，它分别传递id和handleRemove 。

Answer 5

使用button元素的value属性来传递id

 <button onClick={ this.handleRemove} value={id}>Remove</button> 

然后在handleRemove中，从事件中读取值为：

 handleRemove(event) { ... remove(event.target.value); ... }