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

Question

如何使用ES6语法将额外参数传递给onClick事件？

例如:

handleRemove = (e) => {

}

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

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

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

Answer 1

请记住onClick={ ... },这...是一个JavaScript表达式.所以

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

是相同的

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

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

相反,您希望使用已预先填充的参数之一创建新函数; 基本上,你想要以下内容:

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中表达这一点:Function.prototype.bind.

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

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

您也可以简单地定义内联函数; 如果您的环境或转换器支持它,则使箭头功能缩短:

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

如果您需要访问该活动,您可以直接传递:

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

Answer 2

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

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

然后在handleRemove中,从事件中读取值:

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

这样,每次重新渲染此组件时,都可以避免创建新函数(与使用箭头函数相比).

Answer 3

使用箭头功能如下:

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

Answer 4

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

Answer 5

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

你可以这样做:

handleRemove = id => event => {
  // Do stuff with id and event
}

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

但是,所有这些解决方案都有在每个渲染上创建新功能的缺点.最好为Button创建一个新组件,它将分别传递给id它handleRemove.