React 中的事件处理（2）

小半 • 2022年11月21日下午1:00 • React • 阅读 200

事件处理

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>
  );
}