Event

<Card onDelete= {handleDelete}; />

// 事件觸發回叫 callback

theButton.onclick = function (e) {

// 在處理函式中，若有要引用事件物件的屬性和方法，就要引用事件物件

e.target; //這裡的e代表click這個事件

};

tip

e.target vs e.currentTarget

• e.currentTarget：註冊事件物件
• e.target：實際觸發事件的物件 ex: 在父層 ul 綁監聽事件，點擊 li 透過冒泡觸發事件，currentTarget 指向 ul，target 指向 li 可參考: e.currentTarget 與 e.target 的區別

e.preventDefault( )

常用於表單

<form

action=""

onSubmit={(e) => {

e.preventDefault();

}}

>

<input type="text" />

<button type="submit">Submit</button>

</form>

事件和處理函式命名

如何命名事件物件？ on 系列

如何命名處理函式？ handler 系列

<Card onDelete= {handleDelete}; />

//在什麼情況 //執行某事

外部決定做啥事，內部決定做事時機

onUpdate 時要幹嘛 ，onCreate 時要幹嘛

做事時機 = 內部如何定義事件發生

做事時機 = 內部如何定義事件發生

useState

import React ,{ useState } from "react"; 記得先import useState

const [editable, setEditable] = useState(true);

//狀態 //類似function

元件內可自訂狀態（ editable），並用改變狀態的 function（setEditable ）進行狀態管理

元件內可自訂狀態（ editable），並用改變狀態的 function（setEditable ）進行狀態管理