合成事件

合成事件语法

• 基于React内部处理，如果我们合成事件绑定一个普通函数，当事件触发，绑定的函数执行，方法中this会是undefined

不写箭头函数的this

• 如果不写箭头函数，直接调用函数会输出undefined

import React, { Component } from "react";

export default class Demo5 extends Component {
  handel() {
    console.log(666);
    console.log(this);// 输出 undefined
  }
  render() {
    return (
      <div>
        <button onClick={this.handel}>按钮</button>
      </div>
    );
  }
}

不写箭头函数，会输出undefined解决这个问题可有使用bind方法绑定想要的this

解决方式-bind

• 通过bind来绑定当前的this

import React, { Component } from "react";

export default class Demo5 extends Component {
  handel() {
    console.log(666);
    console.log(this); // 输出 undefined
  }
  render() {
    return (
      <div>
        <button onClick={this.handel.bind(this)}>按钮</button>
      </div>
    );
  }
}

写箭头函数

• 直接调用函数时，就可以直接拿到需要的值

import React, { Component } from "react";

export default class Demo5 extends Component {
  handel2 = () => {
    console.log("第二个按钮");
    console.log(this); // 输出 undefined
  };
  render() {
    return (
      <button onClick={this.handel2}>按钮</button>
    );
  }
}

合成事件原理

<div
    className="inner"
    onClick={(ev) => {
        console.log("inner 被点击");
        // 合成事件对象对阻止事件传播；阻止原生事件和合成事件传播
        ev.stopPropagation();
        // 阻止原生事件，只能阻止原生事件
        ev.nativeEvent.stopPropagation();
        // 原生事件对象的阻止事件传播，只不过可以阻止root上绑定的方法执行
        ev.nativeEvent.stopImmediatePropagation();
    }}
    onClickCapture={() => {
        console.log("inner 被点击-onClickCapture");
    }}
    ></div>