reactjs - 使用 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 会自动在实例方法上为您绑定(bind) this，并且除非您将其更改为 this.handleRemove，否则它可能会报错。绑定(bind)(null，id)。

你也可以简单地定义内联函数； arrow functions 使其变得更短如果您的环境或转译器支持它们:

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

如果您需要访问该事件，您可以直接传递它:

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