在React的事件处理和HTML事件处理非常相似，我们像如下这样处理一个Button的点击事件：
// 普通HTML中添加点击事件
<button onclick="activateLasers()">
Activate Lasers
</button>
// React中添加点击事件
<button onClick={activateLasers}>
Activate Lasers
</button>
在HTML中我们通过return false来拒绝默认行为，而React中需要调用preventDefault方法。如下：
// 通过return false拒绝默认行为
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
// 通过preventDefault拒绝默认行为
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
和其它JavaScript方法一样，我们需要特别注意this的指向与绑定。下面这种方式通过bind来绑死函数与this：
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);
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
还可以通过arrow function来绑定this指向，如：
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>
);
}
React中如何处理表单？
好，这一节就到这里。后续我将逐步介绍React技术细节，来慢慢解答上述问题。
想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。
