事件处理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
1、React事件绑定属性的命名采用驼峰式写法,而不是小写。
2、如果采用 JSX 的语法需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)。
<button onClick={activateLasers}>
Activate Lasers
</button>
[注意] 在 React 中不能使用return false 的方式阻止默认行为。必须明确的使用 preventDefault。
【绑定this】
可以使用bind()方法:
this.handleClick = this.handleClick.bind(this);
也可以使用属性初始化器语法:
handleClick = () => {
console.log('this is:', this);
}
【传递参数】
以下两种方式都可以向事件处理程序传递参数:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id, e)}>Delete Row</button>
[注意]通过 bind
方式向监听函数传参,在类组件中定义的监听函数,事件对象 e
要排在所传递参数的后面。
class Popper extends React.Component{
preventPop(name, e){
e.preventDefault();
alert(name);
}
render(){
return (<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
);
}
}
【原生事件对象】
handleClick(e){
e.nativeEvent
}