react 事件绑定

1.class组件

class组件中 事件绑定 会出现this丢失问题

1.给方法调用bind指向this

2.写成一个匿名箭头函数

3.方法本身写成箭头函数

4.若方法中带参数，只能用bind

  class Cc extends React.Component {
    f1(a?: any, b?: any, e?: any) {
      console.log(1)
      console.log(this)
      console.log(a)
      console.log(b)
      // 合成事件对象，原生的在nativeEvent
      console.log(e)
      // 阻止冒泡
      // e.stopPropagation()
      // 阻止捕获
      // e.preventDefault()
    }
    f3 = () => {
      console.log(3)
      console.log(this)
    }
    render() {
      return <div>
        <div>
          1.class组件中 事件绑定 会出现this丢失问题
        </div>
        <div>1.给方法调用bind指向this</div>
        <div>2.写成一个匿名箭头函数</div>
        <div>3.方法本身写成箭头函数</div>
        <div>4.若方法中带参数，只能用bind</div>
        <Button type="primary" onClick={this.f1.bind(this)}>class组件 bind</Button>
        <br />
        <Button type="primary" onClick={() => {
          console.log(2)
          console.log(this)
        }}>class组件 匿名箭头函数</Button>
        <br />
        <Button type="primary" onClick={this.f3}>class组件 方法本身箭头函数</Button>
        <br />
        <Button type="primary" onClick={this.f1.bind(this, 1, 2)}>class组件 bind 带参数</Button>
      </div>
    }
  }

 

2.函数组件

函数组件中没有this,不存在this丢失问题

执行方法 带参数

1.用bind

2.借用函数表达式

 

function cle(a?: any, b?: any, e?: any) {
    console.log(2)
    console.log(a)
    console.log(b)
    console.log(e)
  }
  let jumpOut = (a?: any, b?: any) => {
    return (event: any) => {
      console.log(event)
      console.log(a)
      console.log(b)
    };

  };
  return (
    <div className={styles.container}>
      <div>函数组件中没有this,不存在this丢失问题</div>
      <div>执行方法 带参数用bind</div>
      <Button type="primary" onClick={() => {
        console.log(1)
      }}>函数组件1 匿名箭头函数</Button>
      <br />
      <Button type="primary" onClick={cle}>函数组件2 调用方法</Button>
      <br />
      <Button type="primary" onClick={cle.bind(this, 1, 2)}>函数组件3 调用方法 带参数</Button>
      <br />
      <Button type="primary" onClick={jumpOut(1, 2)}>函数组件4 函数表达式</Button>
      <br />
      <Cc></Cc>
    </div>
  );