React - 如何使用绑定事件处理程序并保留事件对象？

Question

我有以下几点：

<IconButton
  icon="icon-delete"
  onClick={this.deleteItem.bind(this, itemName)}
/>

但是，当deleteItem函数触发时，event参数将丢失。并且引用this仅指React组件。使用event时如何保留/通过bind？

Answer 1

this.deleteItem.bind(this, itemName)表示itemName的值将分配给this.deleteItem的第一个参数。

因此，事件对象将被分配给第二个参数。

有关.bind的详细信息，请查看MDN documentation。

Answer 2

ES6语法中的

。您可以使用:: this.deleteItem

// This is binding the function onFormSubmit to this fn.bind(this)
<form onSubmit={::this.onFormSubmit}>
</form>

我有一些像你这样的代码。

<button className="removeitem" onClick={this.handleClickRemoveFromCart(item, item.id)}>
   <i className="icon icon-close -x3" />
</button>


handleClickRemoveFromCart(item, id) {
    return this.props.onRemoveFromCart(item, id);
};