React学习笔记09- 事件处理

这篇具有很好参考价值的文章主要介绍了React学习笔记09- 事件处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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指向 
  */
}

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

注意:文章来源地址https://www.toymoban.com/news/detail-710903.html

和普通浏览器一样,事件handler会被自动传入一个 event 对象,这个对象和普通的浏览器 event 对
象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的,而是它自
己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法

到了这里,关于React学习笔记09- 事件处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快速上手React:从概述到组件与事件处理

    「作者主页」 :雪碧有白泡泡 「个人网站」 :雪碧的个人网站 「推荐专栏」 : ★ java一站式服务 ★ ★ React从入门到精通 ★ ★ 前端炫酷代码分享 ★ ★ 从0到英雄,vue成神之路★ ★ uniapp-从构建到提升 ★ ★ 从0到英雄,vue成神之路 ★ ★ 解决算法,一个专栏就够了 ★ ★

    2024年02月13日
    浏览(59)
  • 选读SQL经典实例笔记09_数值处理

    8.4.1.1. Oracle Database 10g 8.4.2.1. Oracle 9i

    2024年02月17日
    浏览(82)
  • React【React是什么?、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

           React是什么? 为什么要学习React  React开发前准备  创建React项目 

    2024年02月11日
    浏览(52)
  • React从入门到实战-事件处理,受控组件与非受控组件

    事件处理 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件,而不是使用的原生DOM事件——为了更好的兼容性 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素——为了更高效 通过event.target得到发生事件的DOM元素对象 收集表

    2024年02月12日
    浏览(173)
  • 09-C++学习笔记-文件操作

    在C++中,输入输出流是用于在程序和外部设备(如键盘、显示器、文件等)之间进行数据传输的机制。输入流用于从外部设备读取数据到程序中,输出流用于将程序中的数据输出到外部设备。 C++中的输入输出流分别通过 iostream 库提供的 cin 和 cout 对象来实现。 cin 用于输入流

    2024年02月11日
    浏览(30)
  • web安全学习笔记【09】——算法2

    基础 [1]  入门-算法逆向散列对称非对称JS源码逆向AESDESRSASHA #知识点: 1、Web常规-系统中间件数据库源码等 2、Web其他-前后端软件Docker分配站等 3、Web拓展-CDNWAFOSS反向负载均衡等 ----------------------------------- 1、APP架构-封装原生态H5flutter等 2、小程序架构-WebH5JSVUE框架等 -------

    2024年01月24日
    浏览(36)
  • 【Nginx09】Nginx学习:HTTP核心模块(六)请求头处理

    对于一个 HTTP 应用来说,最重要的其实就是 HTTP 的两个核心功能,一个是请求,一个就是响应。而对于一个 Web 应用服务器来说,响应通常是静态文件或者是动态程序代码来完成,围绕响应的配置指令大部分以缓存优化为主。从这里也能看出,在 Nginx 这种应用服务中,请求相

    2024年02月17日
    浏览(47)
  • STM32学习笔记 IO口模拟串口 (接收采用定时器方式)

            硬件:基于STM32F407VET6编写         软件:使用两个GPIO口,一个用作串口发送TX,一个用作串口接收RX,采用的是定时器模拟                     时序。          要模拟串口,首先肯定是需要了解串口的协议,根据协议来编写程序。                  UART的

    2024年01月15日
    浏览(58)
  • 557、Vue 3 学习笔记 -【常用Composition API(六)】 2023.09.05

    1. shallowReactive 与 shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据,结构比较深,但变化时只是外层属性变化 === shallowReactive 如果有一个对象数据,后

    2024年02月10日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包