事件
在 React 中你不能通过返回 false
(愚人码头注:即 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 是一个合成的事件。 React 根据 W3C 规范 定义了这个合成事件,所以不需要担心跨浏览器的兼容性问题。
类事件绑定
在JSX回调中你必须注意 this
的指向。 在 JavaScript 中,类方法默认没有 绑定 。如果你忘记绑定 this.handleClick
并将其传递给onClick
,那么在直接调用该函数时,this
会是 undefined
。
这不是 React 特有的行为;这是 JavaScript 中的函数如何工作的一部分。 一般情况下,如果你引用一个后面没跟 ()
的方法,例如 onClick={this.handleClick}
,那你就应该 绑定(bind) 该方法。
通常建议在构造函数中进行绑定。