React事件

1、驼峰形式 onClick

  2、调用 onClick={this.Fn}

      this指向问题

  3、解决this指向的问题

      1.箭头函数 onLog1 = () => {} 使用箭头函数改变this的指向

      2.constructor this.fn = this.fn.bind(this)

          onClick={this.Fn}

      3.调用时 使用箭头函数：onClick={() => { this.onLog2('text') }} 推荐使用此种方法

      4.调用时 使用bind函数：onClick={this.onLog3.bind(this, 'text')}

  4、给a标签添加一个事件

        阻止默认事件

        e.preventDefault()

  5、冒泡

        e.stopPropagation();

import React, { Component } from "react";

class View extends Component {

  constructor(props) {

    super(props);

    this.state = {

    }

    this.onLog = this.onLog.bind(this)

  }

  onLog() {

    // 普通函数

    console.log('首次打印')

    console.log(this)

  }

  onLog1 = () => {

    // 箭头函数

    console.log('再次打印')

    console.log(this)

  }

  onLog2(text) {

    console.log(text)

    console.log(this)

  }

  onLog3(text) {

    console.log(text)

    console.log(this)

  }

  // 阻止默认事件 e.preventDefault();

  onAtag(e) {

    e.preventDefault();

    console.log('这是a标签的事件');

  }

  // 阻止事件冒泡 e.stopPropagation();

  onDivAtag(e) {

    e.preventDefault();

    e.stopPropagation();

    console.log('这是div里面的a标签')

  }

  onDiv() {

    console.log('这是div标签')

  }

  render() {

    return (

      <div>

        <h3>事件</h3>

        普通事件：<input onClick={this.onLog} type="button" value="点我1" /><br />

        箭头事件：<input onClick={this.onLog1} type="button" value="点我2" /><br />

        调用时 使用箭头函数：<input onClick={() => { this.onLog2('text') }} type="button" value="点我3" /><br />

        调用时 使用bind函数：<input onClick={this.onLog3.bind(this, 'text')} type="button" value="点我3" /><br />

        给a标签添加一个事件：

        <a onClick={(e) => { this.onAtag(e) }} href="true">这是a标签</a><br />

        事件冒泡：

        <div onClick={() => { this.onDiv() }}>

          <a onClick={(e) => { this.onDivAtag(e) }} href="true">这是div里面的a标签</a>

        </div>

      </div>

    )

  }

}

export default View;