将 arguments 传递给反应中的事件处理程序

Question

所以，我一直在尝试学习 React 并遇到了这段代码。

 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

这让我很困惑。 deleteRow 怎么会有两个 arguments？ 它应该只有一个。 将“e”放入其中有什么作用，为什么需要它？ 为什么 id 是第一行的第一个参数，而第二行的第二个参数？ 为什么我们需要使用'bind'或'this'。 用 deleteRow 吗？ 我以为是内置的function。

Answer 1

e是传递给处理程序的事件，但您也可以传递其他参数。

// handlers
const deleteRow = (e, someVal) => {
   console.log(e);
   console.log(someVal); // "another value"
}

const deleteRow = (e) => {
   console.log(e); // still get the event
}

<button onClick={(e) => this.deleteRow(e, "another value")}>Delete Row</button>

// if you don't need to pass other arguments, you can even do
<button onClick={this.deleteRowB}>Delete Row</button>

Answer 2

是的，这可能会产生误导

如果您不指定，onClick 将自动传递事件

const deleteItem = (event) => {
     console.log(event)
}
<button onClick={deleteItem}>Delete Item</button>