React JSX 中的事件處理程序：基本介紹和語法範例

2023 iThome 鐵人賽

DAY 10

Modern Web

前端開發之那些我會的與我不會的技術系列第 10 篇

15th鐵人賽

ss95159

2023-09-25 20:58:01

282 瀏覽

分享至

如何在JSX加入event handler

如同上篇JSX的介紹，在JSX加上屬性要是駝峰，要使用JS的話要使用大括號{}，

function App() {
	return <button onClick={function() {}}>Click</button>
}

// 也可以使用arrow function
function App() {
	return <button onClick={() => {}}>Click</button>
}

// 也可以宣告個function再帶入
function App() {
	function doSomething() {}
	return <button onClick={doSomething}>Click</button>
}

不同於HTML上的事件綁定，JSX事件綁定的屬性是function不是直接呼叫function

<script>
	function doSomething() {}
</script>
<button onclick="doSomething()">Click</button>

傳遞handler

我們可以在父層建立event hander再傳給子層使用

function Button({onAttack}){ // 大寫開頭的Button是自己建立的component，button是HTML內建的tag
	return <button onClick={onAttack}>攻擊</button>
}

// 可以自訂props名稱，不一定是onClick
export default function App() {
	return <>
		<Button onAttack={() => alert('A attack')} /> 
		<Button onAttack={() => alert('B attack')} />
	</>
}

stopPropagation

阻擋事件冒泡，用法和原本JS的stopPropagation相同

// 在handler加上e.stopPropagation()，點擊button不會觸發parent click
function App() {
	return <div onClick={() => {alert('parent click')}}>
		<button onClick={(e) => {e.stopPropagation()}}>Click</button>
	</div>
}

preventDefault

阻止預設行為，return false可是沒有用的喔

// x
function App() {
	return <form onSubmit={() => false }>
    <button>Send</button>
  </form>
}
// o
function App() {
	return <form onSubmit={(e) => e.preventDefault()}>
		<button>Send</button>
	</from>
}

Event Name + Capture

React提供的事件，可以是onClickCapture或onChangeCapture等的事件，用還獲取冒泡的事件，即使有使用stopPropagation也可以捕獲的到event。可以用來記錄分析點擊的log用。

// 如果parent是onClick，button有stopPropagation就捕獲不到event
function App() {
	return <div onClick={() => { alert('我捕獲不到') }}>
	  <button onClick={e => e.stopPropagation()}>Click</button>
	</div>
}
// 如果parent是onClickCapture，button有stopPropagation還是捕獲到event
function App() {
	return <div onClickCapture={() => { alert('我還是捕獲的到') }}>
	  <button onClick={e => e.stopPropagation()}>Click</button>
	</div>
}

和原生不同(onChange)

在React input或是的onChange事件和原生觸發情境不同

原生的onchange會在focus離開input才觸發事件，在React的onChange和onInput的行為是相同的，我習慣上用onChange，不知道大家習慣會用哪一種?可以留言告訴我。

個人使用經驗

在React的function component中，我習慣會用arrow function來寫handler(下面的方法A)覺得比較簡潔一點，不知道大家都用哪一種方法，有什麼原因?歡迎留言