React学习笔记09- 事件处理

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-19

9.React学习笔记09- 事件处理2023-10-20

10.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

React采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写

onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。

 

事件回调的几种写法

1.直接在组件内定义一个非箭头函数的方法，然后在render里直接使用 onClick=

{this.handleClick.bind(this)} (不推荐)

这种写法需要用bind处理回调函数不然获取不到this

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 
            和vue不同react绑定事件回调不需要加()，this.handler即可

        */}
        <button onClick={this.handler1.bind(this)}>写法一</button>
      </div>
    )
  }
  handler1(e){
    console.log('我是写法一',e,'this:',this);
  }
  /* 
   call,改变this指向并自动执行函数
   apply,改变this指向并自动执行函数
   bind,改变this指向 
  */
}

2.在组件内使用箭头函数定义一个方法(推荐)

这种写法不需要用bind处理回调函数，因为箭头函数的this指向函数定义的外部作用域即class组件本身

 

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 
            和vue不同react绑定事件回调不需要加()，this.handler即可

        */}
        <button onClick={this.handler1.bind(this)}>写法一</button>
        <button onClick={this.handler2}>写法二</button>
 
      </div>
    )
  }
  handler1(e){
    console.log('我是写法一',e,'this:',this);
  }
  handler2=(e)=>{
    console.log('我是写法二',e,'this:',this);
  }

  /* 
   call,改变this指向并自动执行函数
   apply,改变this指向并自动执行函数
   bind,改变this指向 
  */
}

 

3.直接在render里写行内的箭头函数(不推荐)

这种写法也可获得this，因为函数的this是指向其调用者。而箭头函数的this指向其定义的外部作用域即render，render的this指向class，最终获得this就是class

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 
            和vue不同react绑定事件回调不需要加()，this.handler即可

        */}
        <button onClick={this.handler1.bind(this)}>写法一</button>
        <button onClick={this.handler2}>写法二</button>
        <button onClick={
            (e)=>{
                this.handler3(e)
            }
        }>写法三</button>
      </div>
    )
  }
  handler1(e){
    console.log('我是写法一',e,'this:',this);
  }
  handler2=(e)=>{
    console.log('我是写法二',e,'this:',this);
  }
  handler3(e){
    console.log('我是写法三',e,'this:',this);
  }
  /* 
   call,改变this指向并自动执行函数
   apply,改变this指向并自动执行函数
   bind,改变this指向 
  */
}

4.直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)

class组件里的构造函数一定要使用super来继承Component

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super()
        this.handler4 = this.handler4.bind(this)
      }
  render() {
    return (
      <div>
        {/* 
            和vue不同react绑定事件回调不需要加()，this.handler即可

        */}
        <button onClick={this.handler1.bind(this)}>写法一</button>
        <button onClick={this.handler2}>写法二</button>
        <button onClick={
            (e)=>{
                this.handler3(e)
            }
        }>写法三</button>
        <button onClick={this.handler4}>写法四</button>

      </div>
    )
  }
 
  handler1(e){
    console.log('我是写法一',e,'this:',this);
  }
  handler2=(e)=>{
    console.log('我是写法二',e,'this:',this);
  }
  handler3(e){
    console.log('我是写法三',e,'this:',this);
  }
  handler4(e){
    console.log('我是写法四',e,'this:',this);
  }
  /* 
   call,改变this指向并自动执行函数
   apply,改变this指向并自动执行函数
   bind,改变this指向 
  */
}

这里我一般使用方法二和三

注意：

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对

象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自

己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法