React事件处理 事件绑定 事件对象

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

• React 事件的命名采用小驼峰式，而不是纯小写。

onClick  onChange

• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

onClick={this.fn}

• 类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

export default class extends React.Component {

    clickHandle(e){

        console.log('点了')

    }

    render(){

        return (

            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>

        )

    }

}

 

React中可以通过事件处理函数的参数获取到事件对象，它的事件对象叫做：合成事件，即兼容所有浏览器，无需担心跨浏览器兼容问题，此事件对象还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()，如果你想获取到原生事件对象，可以通过 e.nativeEvent 属性来进行获取

export default class extends React.Component {

    clickHandle(e){

        // 获取原生事件对象

        console.log(e.nativeEvent)

    }

    render(){

        return (

            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>

        )

    }

}

import React, { Component } from 'react'

export default class Itemclass extends Component {

  render() {return (
      <div>
        类组件
        <button onClick={this.fn}>点击我试一下</button>
        <hr />
        <a href="http://www.baidu.com" onClick={this.fn2}>百度一下</a>
      </div>
    )
  }

  fn(evt) {
    // alert('弹出一下')
    console.log(evt)
    // 当前事件触的dom元素
    console.log(evt.target);
    console.log(evt.target.innerHTML);

    // 原生event事件对象
    console.log(evt.nativeEvent);
  }

  fn2(evt) {
    // 手动取消标签默认行为
    evt.preventDefault();

    console.log('fn2执行了');
  }
}

import React from 'react';

const Items = ({ title, num }) => {

  const fn = () => {
    alert('fn函数')
  }

  return (
    <div>
      我是一个函数组件
      <button onClick={fn}>function 点击我试一下</button>
    </div>
  );
}

export default Items;