avatar

事件處理

一開始會先講一些前情提要,詳細可以參考官方的事件處理這篇文章

使用方式

首先需要先知道在JSX上面寫的事件是以camelCase做命名

HTML

1
2
3
<button onclick="activateLasers()">
Activate Lasers
</button>

JSX

1
2
3
<button onClick={activateLasers}>
Activate Lasers
</button>

瀏覽器預設行為

一般要取消瀏覽器的預設行為僅需要return false,但在JSX你需要使用preventDefault

HTML

1
2
3
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>

JSX

1
2
3
4
5
6
7
8
9
10
11
12
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}

Comment