我在 ReactJS 中構建了一個簡單的計數器應用程式。代碼如下。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [countNum, setCountNum] = useState(0);
function increaseCount() {
setCountNum(countNum 1);
}
function decreaseCount() {
if (countNum > 0) {
setCountNum(countNum - 1);
}
}
function disableChecker() {
if (countNum === 0) {
return true;
} else {
return false;
}
}
return (
<div className="App">
<button onClick={() => decreaseCount()} disabled={disableChecker()}>Decrease</button>
<button onClick={() => increaseCount()}>Increase</button>
<h2>{countNum}</h2>
</div>
);
}
我只想知道為什么onClick={() => increaseCount()} 有效以及為什么onClick={increaseCount()}或onClick={() => increaseCount} 無效？
這里是初學者，請指導我回答。
uj5u.com熱心網友回復：
onClick={() => increaseCount()}-> 將一個函式作為事件處理程式分配給onclick. 函式體increaseCount()內部有。因此，當函式運行時（在事件觸發器上），會increaseCount被執行/運行。
onClick={increaseCount()}->increaseCount一旦遇到此代碼， React 就會運行。increaseCount改變狀態并導致重新渲染，并且在下一個渲染周期中發生同樣的事情導致一個周期。這應該有無限渲染。
onClick={() => increaseCount}-> 和第一個一樣，但在函式體內，()在increaseCount. 這不會 increaseCount在事件發生時執行函式。帶有函式名而不帶括號的簡單陳述句將什么也不做。
uj5u.com熱心網友回復：
為什么每次組件渲染時都會呼叫我的函式？確保在將函式傳遞給組件時沒有呼叫該函式：
render() {
// Wrong: handleClick is called instead of passed as a reference!
return <button onClick={handleClick()}>Click Me</button>
}
相反，傳遞函式本身（不帶括號）：
render() {
// Correct: handleClick is passed as a reference!
return <button onClick={handleClick}>Click Me</button>
}
您可以使用箭頭函式來環繞事件處理程式并傳遞引數：
<button onClick={() => handleClick(id)} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343814.html
標籤：javascript 反应 jsx 箭头函数