將 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>