這個問題在這里已經有了答案： 在 ReactJS 中使用箭頭函式或 onClick 函式之間的區別？ (2 個回答) 5 小時前關閉。
我對使用的不同型別的 onClick 事件感到困惑。有人可以幫助我清除我的概念嗎？
<button onClick={increaseQuantity}>increase</button>
<button onClick={()=>increaseQuantity}>increase</button>
<button onClick={increaseQuantity()}>increase</button>
<button onClick={()=>increaseQuantity()}>increase</button>
<button onClick={()=>increaseQuantity(item)}>increase</button>
<button onClick={increaseQuantity(item)}>increase</button>
什么時候使用哪個功能？
其次，如果我錯過了任何其他場景，請提及它們。
uj5u.com熱心網友回復：
記住函式呼叫和函式參考之間存在差異非常重要，我相信您的困惑來自不知道哪個是哪個。
除了參考，還有函式字面量，總而言之，就是函式，就像false布爾字面103量和數字字面量一樣，() => {}是函式字面量，你說你知道箭頭函式，所以我不會解釋部分。
函式字面量，就像 javascript 中的任何其他字面量一樣，可以分配給變數，有很多方法可以做到這一點，但現在，大多數人都這樣做：
const myFunction = () => {};
現在我們可以打電話了myFunction，像這樣myFunction();
好的，那么函式參考和函式呼叫有什么區別？好吧，函式參考看起來像 this() => <something>或者像 this myFunction，其中myFunction以前在其他點定義為函式，也就是說，函式參考只是指向函式的一種方式，或者定義為變數或函式字面量。
另一方面，函式呼叫只是一個()在后面添加的函式文字，您可以在其中為括號內的引數傳遞值，這里有幾個函式呼叫的示例：
console.log('');
myFunction();
(() => {})();
我認為最后一個特別有趣，我將一個函式文字包裝到一些括號中，然后在文字后面加上一個括號，這是呼叫函式的有效方式。
這里的關鍵點是函式字面量與 javascript 中的任何其他內容一樣重要。
如果我們這樣做：
const myFunction = () => 100;
如果我們打電話，你認為會發生typeof myFunction什么？好吧，我們得到 string 'function'，另一方面，如果我們呼叫typeof myFunction()，我們得到型別'number'，因為這是呼叫回傳的內容，也就是說，函式呼叫將對函式回傳的任何內容進行評估。
最后但同樣重要的是，在我回答您的問題之前，重要的是要知道，由于函式只是一種值，沒有什么可以阻止函式回傳另一個函式：
const functionA = () => 100;
const higherOrderFun = () => {
return functionA;
};
console.log(higherOrderFun()()); // prints 100
好的，所有這些都結束了，讓我們看看你的實際問題。
首先，您應該知道該onClick屬性需要一個函式作為它的引數。
假設increaseQuantity是一個沒有引數的 void 函式，以下是每個示例的作用：
onClick={increaseQuantity}這里沒有什么奇怪的，我們傳遞一個函式作為 onClick 屬性，它期望一個函式，當您單擊按鈕時，該increaseQuantity函式將被呼叫，這大概是預期的結果。onClick={()=>increaseQuantity}您正在傳遞一個回傳另一個函式的函式，您的匿名函式將被呼叫，它將回傳對 的參考increaseQuantity，但永遠不會呼叫該參考。onClick={increaseQuantity()}您將呼叫increaseQuantity作為引數傳遞給onClick，除非increaseQuantity回傳一個函式，否則這將引發錯誤，不執行任何操作，或兩者兼而有之。在這種情況下increaseQuantity，將在應用程式啟動時呼叫一次以獲取實際回呼。onClick={()=>increaseQuantity()}這也將起作用，increaseQuantity您正在傳遞一個回呼，其唯一的一行是呼叫在這個例子中是不可能的：，但除此之外，它們幾乎是等價的。inclreaseQuantityincreaseQuantityonClick={increaseQuantity}
最后兩個示例的作業方式與上面相同，但您將引數傳遞給函式。
uj5u.com熱心網友回復：
當您想觸發執行某些操作的函式時：
<button onClick={()=>increaseQuantity()}>increase</button>
然后您還可以發送一個引數，例如：
<button onClick={()=>increaseQuantity(item)}>increase</button>
如果您不需要該引數并且您已在其他地方宣告了箭頭函式：
const increaseQuantity = () => {
//do something
};
// ...
<button onClick={increaseQuantity}>increase</button>
如果你想在 JSX 的某個地方使用函式的結果，你可以呼叫行內函式，但這不是你想要的點擊處理程式（因為它應該在點擊之后發生），但是例如：
<a href={calculateHref()}>Link</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/517635.html