Handling Events
React元素的事件处理非常类似于对DOM元素添加事件处理,但有一部分的语法不同。
1. React事件使用camelCase来进行命名,而不是小写字母
2. JSX需要传递一个函数作为事件处理函数,而不是一个字符串。
//DOM元素的事件处理函数
<button onclick="activateLaser()">
Activate Lasers
</button>
//React元素的事件处理函数
<button onClick={activateLasers} >
Activate Lasers
</button>
另外一个不同是不能够通过返回一个false
来阻止默认操作。必须调用preventDefault
,比如:
//DOM元素事件处理阻止默认操作
<a href="#" onclick="console.log('The link was clicked.'); return false;">
Click me
</a>
//React元素
function ActionLink() {
//e是事件的各种信息,是根据W3C标准定义的。不需要考虑浏览器兼容问题
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
)
}
在JSX的回调函数中,要注意this的含义,JavaScript中,类方法并不属于任何运行形式,所以如果忘记绑定类的this给事件处理函数的话,那么this在事件处理函数中会变成undefined。如果你不带()
来调用一个方法的时候,必须要绑定类的this给事件处理函数。
如果这样很麻烦的话,可以使用箭头运算符来定义方法。
或者使用箭头运算符来进行回调函数调用。
//property initializer syntax
class LoggingButton extends React.Component {
handleClick = () => {
console.log('this is:', this);
}
}
//arrow function
class LogginButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}