事件处理
React 元素采用类似 DOM0 标准中的事件属性定义方法
JSX
<button onClick={this.doSth}>点击</button>直接创建
React元素方法：
React.createElement(
'button',
{
onClick: { this.doSth }
},
'点击'
)
- 类组件
class App extends React.Component {
doSth(e) {
console.log("Somthing is Done");
}
render() {
return <button onClick={this.doSth}>点击</button>;
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
React 事件对象(event)
React 重新定义了事件对象，SyntheticBaseEvent: 合成基础事件对象
SBE 是遵守 W3C 事件对象规范的，不存在任何浏览器兼容性问题
为什么 React 要将事件处理直接在 React 元素上绑定？
- React 认为事件处理和视图是有程序上直接关系的，事件处理和视图写在一起可以更加直观的表述视图和逻辑的关系，更好维护
- JSX 语法不是 HTML 语法中的 addEventListener 绑定
this 指向
- 默认处理函数的 this 为 undefined
- ES6 class 模块默认不对事件处理函数进行 this 的再绑定
解决 this 指向的方法
- 构造器中
bind(this)
constructor(props) {
super(props);
this.doSth = this.doSth.bind(this);
}
- 视图标记中
bind(this)
render() {
return <button onClick={this.doSth.bind(this)}>点击</button>;
}
- 回调 + 箭头函数（
React不建议使用）
render() {
return <button onClick={() => this.doSth()}>点击</button>;
}
-
render函数每次执行的时候，都会创建一个新回调 - 当给子组件的属性进行函数传递的时候，由于每次都创建一个回调，子组件每次都会接收一个新的函数，可能会触发子组件的
render - 解决方法
class fields
// 实验性写法
doSth = () => {
console.log(this);
}
render() {
return <button onClick={this.doSth}>点击</button>;
}
其他
// 回调，要显式传入事件对象
doSth1 = (p1, p2, e) => {
console.log(p1, p2, e);
}
// bind 隐式传入事件对象，事件对象都在最后一个参数
doSth2 = (p1, p2, e) => {
console.log(p1, p2, e);
}
render() {
return (
<div>
<button onClick={(e) => this.doSth1(1, 2, e)}>点击</button>
<button onClick={this.doSth2.bind(this, 1, 2)}>点击</button>
</div>
);
}
