react事件处理和dom事件处理是相似的。
- react:
<button onClick={activateLasers}>
Activate Lasers
</button>
- Dom:
<button onclick="activateLasers()">
Activate Lasers
</button>
所以:
- React事件绑定属性的命名采用驼峰式写法,而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
- react不能使用
return false
来阻止默认行为,必须使用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>
);
}