原文地址:https://facebook.github.io/react/docs/handling-events.html
使用React元素处理事件与处理DOM元素上的事件非常相似。 有一些句法差异:
- 反应事件使用camelCase命名,而不是小写。
- 使用JSX,您可以传递一个函数作为事件处理程序,而不是一个字符串。
- 不能用return false来阻止React中的默认行为,而是必须显式调用preventDefault。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
在这里,e是一个合成事件。React根据W3C规范定义了这些合成事件,因此您不必担心跨浏览器的兼容性。
当使用React时,您通常不需要调用addEventListener来在创建DOM元素之后添加监听器。而是在元素最初呈现时提供一个监听器。
当您使用ES6类定义组件时,常见的模式是将事件处理程序作为类上的方法。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
button绑handleClick方法时,是用onClick而不是onclick。