先前撰寫原生JavsScript的事件處理，
是使用 addEventListener('click', ...) 的方法，來做事件的處理，
而React 的事件處理是寫在JSX上。
例如:有一個按鈕綁定點擊事件，在JSX上這樣撰寫：
<button onClick= { ... } >請點擊</button>
onClick={ handleClick }，而不是 onClick="handleClick()"。從上面的兩個特點：
可以了解到React 的事件處理撰寫方式是 on+[事件名稱]={ 函式 }，
事件名稱首字會是大寫且採用駝峰式( camelCase) 方式。
列舉常使用到的事件處理：
onClick
onChange
onSubmit
onKeyDown
onFocus
onBlur
首先，我們來看看 onClick 事件。當點擊 <a> 標籤後，React 會自動傳入 event 物件給我們的事件處理函式，這個 event 包含了關於這次事件的詳細資訊。
function App() {
function handleClick(event) {
event.preventDefault(); // 阻止預設的行為，避免跳轉
alert('Click！');
console.log('event', event); // 查看 event 物件的內容
}
return (
<div>
<a href="https://www.google.com/" onClick={handleClick}>請點擊我</a>
</div>
);
}
export default App;
我們使用 onClick 來綁定一個點擊事件給 <a> 標籤。
當使用者點擊該標籤時，handleClick 函式會被呼叫，
並接收到一個 event 物件作為參數。
onChange 事件常用於表單元素，
例如 <input> 或 <textarea> 及 <select>元素上，
使用者在這些元素中輸入內容，或點選下拉式選單時，onChange 事件會被觸發。
function App() {
function handleChange(event) {
console.log('輸入的值:', event.target.value); // event.target.value 取得當下輸入框的值
}
return (
<div>
<input type="text" onChange={handleChange} placeholder="請輸入文字" />
</div>
);
}
export default App;
在這個範例中，每當使用者在輸入框中輸入文字時，handleChange 函式都會被呼叫，我們可以通過 event.target.value 來獲取輸入的值。
onSubmit 事件通常用於 <form> 元素，當使用者提交表單時觸發。
function App() {
function handleSubmit(event) {
event.preventDefault(); // 阻止表單的默認發送行為
alert('表單已提交');
}
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="請輸入文字" />
<button type="submit">提交</button>
</form>
);
}
export default App;
我們通過 onSubmit 事件來處理表單的提交，並阻止默認行為，這樣表單就不會重新整理頁面。
我們可以根據需求，在 handleSubmit 中增加額外的邏輯，如表單驗證等。
onKeyDown 事件處理鍵盤按鍵事件，當使用者按下鍵盤上的任何鍵時觸發。
function App() {
function handleKeyDown(event) {
console.log('按下的鍵:', event.key); // 取得按下的鍵名
}
return (
<div>
<input type="text" onKeyDown={handleKeyDown} placeholder="請按下任意鍵" />
</div>
);
}
export default App;
在這個範例中，每當使用者在輸入框中按下一個鍵時，handleKeyDown 函式都會被呼叫，
我們可以通過 event.key 來獲取按下的鍵的名稱。
onFocus 事件處理當元素獲得焦點時的行為，通常用於表單元素的樣式或驗證。
function App() {
function handleFocus() {
console.log('輸入框獲得焦點');
}
return (
<div>
<input type="text" onFocus={handleFocus} placeholder="點擊獲取焦點" />
</div>
);
}
export default App;
這個範例是展示使用 onFocus 來檢測輸入框何時獲得焦點。
當使用者點擊輸入框時，handleFocus 函式會被觸發。
onBlur 事件處理當元素失去焦點時的行為，通常用於表單驗證或樣式恢復。
function App() {
function handleBlur() {
console.log('輸入框失去焦點');
}
return (
<div>
<input type="text" onBlur={handleBlur} placeholder="失去焦點時觸發" />
</div>
);
}
export default App;
在這個範例中，當使用者點擊輸入框之外的地方，
輸入框失去焦點時，handleBlur 函式會被呼叫，
可以在這裡處理驗證邏輯或恢復樣式。
今天了解到各種的事件處理方式，每個事件處理器都遵循 React 的方式， on+[事件名稱]={ 函式 }，理解和熟練掌握這些事件處理方式，能讓你更輕鬆地構建與使用者交互的 React 應用。
本文將會同步更新到我的部落格
iThome鐵人賽
看影片追技術