赞助
posts - 449,comments - 12,views - 11万

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;
复制代码

 

posted on   Tsunami黄嵩粟  阅读(111)  评论(0编辑  收藏  举报
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示