重點整理

• 事件命名上必須使用小駝峰，且為 String
• 事件中必須放一個回傳 Function

return (
  <button onClick={() => {}}>事件</button>
  <button onClick={clickHandler}>Submit</button>
)

注意

記得如果我們替事件加上 ()，代表程式會直接執行

我們直接看範例好嘞，不然感覺好像在講廢話，以下面為例

會進入一個無限迴圈狀態!

const [state,setState] = useState(1);

const clickHandler = (e) => {
    // 執行函式
    e.preventDefault();
    setState(state +1);
}

return (
  <button onClick={clickHandler()}>Submit</button>
)

補充

1. 剛好看到一個產生陣列數量的小技巧，紀錄一下

[...Array(5).keys()]
//[0,1,2,3,4]

1. 為何不能在 JSX 中撰寫 for 迴圈，是因為 for 迴圈本身是個 Statement，並不會有回傳值。所以以此類推沒有回傳值的方法都不能寫在 JSX 中。