react事件處理和dom事件處理是相似的。
- react:
<button onClick={activateLasers}>
Activate Lasers
</button>
- Dom:
<button onclick="activateLasers()">
Activate Lasers
</button>
所以:
- React事件綁定屬性的命名采用駝峰式寫法,而不是小寫。
- 如果采用 JSX 的語法你需要傳入一個(gè)函數(shù)作為事件處理函數(shù),而不是一個(gè)字符串(DOM元素的寫法)
- react不能使用
return false來阻止默認(rèn)行為,必須使用preventDefault
DOM:
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
React:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}