学习笔记:React事件处理
2021-03-26 本文已影响0人
双鱼子曰1987
一、React 事件处理
- React 元素的事件处理和 DOM 元素类似,但是有一点语法上的不同。
// HTML 通常写法是:
<button onclick="activateLasers()">
激活按钮
</button>
//React 中写法为:
<button onClick={activateLasers}>
激活按钮
</button>
- React 事件绑定属性的命名采用驼峰式写法,而不是小写。
- 如果采用 JSX 的语法,需要传入一个函数作为事件处理函数,即
xxx = { 方法名 }
。 - 在 React 中不能使用返回 false 的方式阻止方法的默认行为,必须明确使用
preventDefault
。
class TapButton extends React.Component {
constructor(props){
super(props);
this.state = {isToggleOn: true};
// 为了在回调中使用 `this`,这个绑定是必不可少的
this.clickHandler = this.clickHandler.bind(this);
}
render() {
return <button onClick={this.clickHandler}> {this.state.isToggleOn ? "ON" : "OFF"} </button>
}
clickHandler() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
}
- JSX 回调函数中的
this
,类的方法默认是不会绑定this
的。未绑定的时候,当你调用这个函数的时候this
的值会是undefined
。