在React元素上进行事件处理和在DOM元素上进行事件处理很相似。它们有一些语法上的不同：
1.React事件以驼峰标识命名，而不是以小写字母
2.在JSX语法中你需要传入函数作为事件处理器，而不是字符串
例如，这段HTML代码：
<button onclick="activateLasers()">
Activate Lasers
</button>
在React中有略微的不同：
<button onClick={activateLasers}>
Activate Lasers
</button>
另一个不同是，在React中你不可以通过return false来阻止默认行为。你必须明确地调用preventDefault()方法。例如，在纯HTML代码中，为了阻止链接打开新标签页的默认行为，你可以这样写：
<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>
);
}
在这里，e是一个synthetic event，React根据W3C规范来定义了这些synthetic event。所以，你无需担心跨浏览器的兼容性问题。可以通过这个链接看一下关于synthetic event部分的参考内容(https://reactjs.org/docs/events.html)。
在使用React的时候，你通常不需要调用addEventListener()方法来给DOM元素添加事件监听器当它被创建之后。取而代之的是，你只需要在它被初始化渲染的时候提供一个事件监听器。
当你通过ES6 class的形式来定义一个组件，对于一个事件处理来说普遍的模式是把它变成这个class中的一个函数。例如，这个 Toggle组件渲染了一个按钮，让用户可以在开和关两种状态之间进行切换：
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')
);
你一定要对JSX回调中this的含义小心。在JavaScript中，类方法默认情况是not bound的(this指向不正确)。如果你忘记绑定this.handleClick，并且把它传入到onClick中，当这个函数执行时，this的值将为undefined。
this不是React特有的行为，它是在JavaScript中函数如何绑定（bind）的一部分（https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/），通常，如果你引用一个函数，在它之后没有跟上()，例如onClick={this.handleClick}，你应该bind这个方法。
如果调用bind方法让你觉得烦恼，有两种方式可以让你绕过this。如果你正在使用还处于实验性阶段的public class fields syntax，你可以使用class fields来纠正this的绑定问题：
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
在Create React App （https://github.com/facebook/create-react-app）中默认采用了这种语法。
如果你没有使用class fields syntax，那么你可以在回调中使用箭头函数：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
这种语法带来了一个问题，每次渲染LoggingButton 时都会创建一个不同的回调。在大多数情况下，它都没问题。如果这个回调函数被当作props传递给下一级的组件，这些组件将会进行额外的再次渲染。我们通常建议在构造器中进行绑定，或者使用 class fields syntax，以此来避免可能产生的性能问题。
为事件处理器传入参数
在循环当中，给事件处理函数传入额外的参数是很常见的。例如，如果id是row id，下面任意一种方式都是可以的：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上面两种写法是等价的。使用箭头函数或者是函数原型对象上的bind方法。
在两种情况中，e 参数代表这React事件将会被传入当作第二个参数，id作为第一个参数。对于箭头函数而言，我们必须明确地传入e。但是采用bind的形式则不需要这样做。
网友评论