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

Question

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

例如：

handleRemove = (e) => {

}

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

我想向handleRemove函数传递一个id，如下所示：

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

Answer 1

像这样使用箭头函数：

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

Answer 2

使用button元素的value属性传递id，如下所示

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

然后在HandleRemove中，将事件中的值读取为：

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

这样可以避免每次重新渲染此组件时创建新函数（与使用箭头函数相比）。

Answer 3

请记住，在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） .

您也可以简单地定义内联函数；如果您的环境或transpiler支持箭头函数，则箭头函数会使其变短：

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

如果您需要访问该活动，您可以将其传递给：

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