React 中事件处理

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

不要问自己需要什么样的人生,而要问自己想要成为什么样的人。

我们从前面的学习知道一个 React 组件不仅仅只包含 DOM 结构的,还应该样式和 Javascript 逻辑的。这里我们认识逻辑构造之事件处理。

1. React 事件处理

这里列举了在 React 中事件的几种绑定处理方式:

import React, { Component } from "react";

class App extends Component {
  render () {
    return (
      <div>
        <input/>
        <button onClick={ ()=>{ console.log("第一种事件绑定处理方式") }}>Add-1</button>
        <button onClick={ this.handleClick2 }>Add-2</button>
        <button onClick={ this.handleClick3 }>Add-3</button>
        <button onClick={ ()=>{ this.handleClick4() } }>Add-4</button>
      </div>
    )
  }

  handleClick2() {
    console.log("第二种事件绑定处理方式")
  }

  handleClick3 = ()=>{
    console.log("第三种事件绑定处理方式")
  }

  handleClick4 = ()=>{
    console.log("第四种事件绑定处理方式")
  }
}

export default App;

2. 事件绑定区别

这里重点说明下在事件和事件绑定绑定中 this 指向问题。

2.1 匿名函数

直接执行匿名函数,直接在 {} 中写事件函数表达式。

写法特点:

  • 适合逻辑少、简单表达式。如果处理逻辑过多、复杂 ,会导致结构不清晰,难维护,不推荐。
  • 事件内部 this 指向和外部一致,因为箭头函数没有 this 指向问题原则。

能直接访问:

  • 因为 onClick 后面表达式跟的是一个函数(箭头函数),这里事件内部 this 指向和外部一致。
class App extends Component {
 // 定义属性
 value = 100

 render () {
  return (
    <div>
      <input/>
      <button onClick={ ()=>{ console.log("第一种事件绑定处理方式", this.value) }}>Add-1</button>
    </div>
  )
}

2.2 调用内部普通函数

写法特点:this 指向和外部不一致,需要用 bind 修正 this 指向,不推荐使用。

<button onClick={ this.handleClick2 }>Add-2</button>
// 修正后:
<button onClick={ this.handleClick2.bind(this) }>Add-2</button>

handleClick2() {
  // 异常,需要通过改变 this 指向解决
  console.log("第二种事件绑定处理方式", this.value) 
}

不能直接访问:

这里访问类属性 this.value 会报错,我们可以打印出 this 看下它指向什么,结果会是:undefined。为什么 this 会丢失呢?记住一句话:函数中的 this 谁调用我,this 就指向谁。这里点完按钮后被 React 事件系统调用的,this 指向的应该是 React 事件系统。用于不会指向 App 这个实例。而这里它也没有指向 React 事件系统,而是丢了指向 undefined。哈哈哈....

2.3 调用内部箭头函数

写法特点:this 指向和外部一直,没有 this 指向问题,推荐使用。

<button onClick={ this.handleClick3 }>Add-3</button>

handleClick3 = ()=>{
  console.log("第三种事件绑定处理方式", this.value)
}

这里是箭头函数,this 指向根本不关心谁调用的我,它永远保持与外部作用域一样的,它指向的 app 的实例。为什么箭头函数 this 指向就不关心谁调用的我呢?我也不知道.... 难到....

  • 箭头函数会自动改变 this 的指向???
  • 或者箭头函数不是改变 this 指向,而是引用上一个作用域的 this ???
  • 一个比较权威的解释是在箭头函数中,this 与封闭词法上下文的 this 保持一致。在全局代码中,它将被设置为全局对象。

2.4 执行匿名函数,调用其他内部函数

写法特点:this 指向和外部一直,没有 this 指向问题,符合谁调用我我指向谁。非常推荐使用这种写法,参数传递很方便。

<button onClick={ ()=>{ this.handleClick4() } }>Add-4</button>
// 语法简写:
<button onClick={ ()=>this.handleClick4() }>Add-4</button>

// 有人说这里是因为你写成了箭头函数了吧,即使他不写成箭头函数也没关系,刚才讲的原理,符合谁调用我我指向谁。
handleClick4 = ()=>{
  console.log("第四种事件绑定处理方式", this.value)
}

整体有个问题: 要不要加小括号,不加不让他自己主动执行,点击系统会调用、加小括号执行函数。加小阔号主动执行,点击后不执行 undefined。

2.5 JS 中修正 this 指向方案

  • call:改变 this 指向,自动执行函数;
  • apply:改变 this 指向,自动执行函数;
  • bind:改变 this 指向,不会自动执行函数,需要手动加括号执行函数 ;
var obj1 = {
  name: "obj1",
  getName() {
    console.log(this.name)
  }
}

var obj2 = {
  name: "obj2",
  getName() {
    console.log(this.name)
  }
}

// this.name 谁调用我我指向谁
obj1.getName() // 结果 obj1
obj2.getName() // 结果 obj2

// call, reply :修改 obj1 getName 中 this 指向 obj2
obj1.getName.call(obj2) // 结果 obj2
obj2.getName() // 结果 obj2

3. 总结事件处理

3.1 this 指向问题,记住两句话

  • 谁调用我我指向谁原则;
  • 箭头函数没有 this 指向问题;

3.2 React 事件绑定和原生事件绑定有什么区别?

React 中事件绑定没有绑定到具体的 DOM 节点(元素)身上。它采用的是一种事件代理的模式,绑定在根节点身上。绑定到每一个 DOM 节点身上是很消耗内存的。

React 模拟了一套事件冒泡机制,等冒泡到根节点上通过 target 事件源找到是那个元素真实触发的,然后从这个触发的元素到顶点所有节点都去查一查,有没有一个叫 onClick 属性,如果有就把这个 onClick 事件给执行了,完整模拟冒泡的流程,即模拟系统事件机制。其不需要考虑解绑、移除事件等,只有节点从页面中没了,onClick 根本就不会再有了,没有绑定只有节点没了 onClick 就没了。

3.3 Event 事件对象也是支持的

Event 对象,和普通浏览器一样,事件 handler 会被自动传入一个 event 对象,这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React 中的 event 对象并不是浏览器提供的,而是它自己内部所构建的。它同样具有 event . stoppropagation、event.preventDefault 这种常用的方法。文章来源地址https://www.toymoban.com/news/detail-747390.html

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

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

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

相关文章

  • 华东师范大学副校长周傲英:未来,中国需要什么样的数据库?

    本文为华东师范大学副校长,CCF 会士周傲英教授在第一届 OceanBase 开发者大会带来的分享。欢迎访问 OceanBase 官网获取更多信息:https://www.oceanbase.com/ 3 月 25 日,第一届 OceanBase 开发者大会在北京举行,华东师范大学副校长,CCF 会士周傲英教授带来了《未来,中国需要什么样

    2024年02月08日
    浏览(36)
  • 【解锁未来】让微软Copilot介绍自己,再由ChatGPT润色文章,到底能成什么样?

    今天突发奇想,如果让 微软Copilot介绍自己,再由ChatGPT润色文章,到底能成什么样? 问:撰写关于微软bing的文章 微软bing是一款全球领先的搜索引擎,它可以帮助用户快速、准确、安全地找到所需的信息。微软bing不仅提供了丰富的搜索功能,如网页、图片、视频、新闻、地

    2024年02月05日
    浏览(48)
  • 【从零开始拿捏数据结构】 顺序表是什么?它有什么样的特性?结构到底是什么样的?

    🎥 屿小夏 : 个人主页 🔥个人专栏 : 数据结构解析 🌄 莫道桑榆晚,为霞尚满天! ​ 什么是数据结构?我们为什么要学数据结构?数据结构中的顺序表长什么样子?它是怎么运用? ​ 本期我们将对这些一一讲解,彻底明白数据结构的重要性,以及顺序表是一种什么的数据

    2024年02月08日
    浏览(106)
  • IPD是什么?适合什么样的团队?

    IPD,全称为“Integrated Project Delivery”,即集成产品开发。它是一种全新的项目管理方法,最初源于建筑行业,随着时间的推移,已经应用到了各行各业的项目管理中。IPD是一种以协同合作为核心的工作模式,在这种模式下,项目中的所有相关方在项目的整个生命周期中进行更

    2024年02月13日
    浏览(51)
  • 法线贴图可以实现什么样的3D效果

    在线工具推荐: 3D数字孪生场景编辑器  -  GLTF/GLB材质纹理编辑器  -  3D模型在线转换  -  Three.js AI自动纹理开发包  -  YOLO 虚幻合成数据生成器  -  三维模型预览图生成器  -  3D模型语义搜索引擎 在 3D 建模中,曲面由多边形表示。照明计算是基于这些多边形的几何形状执

    2024年02月03日
    浏览(57)
  • 抖客是种什么样的盈利方式

    抖客是什么?怎么推广?如何设置?抖客联盟app有什么用,类似抖客联盟的app有哪些,抖客是种什么样的盈利方式 抖音直播间引流、增长,抖客来帮忙!助力MCN机构培养达人,提升达人等级,这时候也需要一大批抖客,大家是否知道抖客是什么呢?应该要怎么进行推广呢? “抖客”

    2023年04月08日
    浏览(48)
  • 百万赞同:网络安全为什么缺人? 缺什么样的人?

    1.网络安全为什么缺人? 缺人的原因是有了新的需求 以前的时候,所有企业是以产品为核心的,管你有啥漏洞,管你用户信息泄露不泄露,我只要做出来的产品火爆就行。 这一切随着《网络安全法》、《数据安全法》、《网络安全审查办法》等一系列有关网络安全的法律法规

    2023年04月23日
    浏览(72)
  • 工具在接口测试中发挥什么样的作用?

    接口测试究竟是什么?为什么要用接口测试?它有哪些工具呢?这一连串的问题敲击着我们,请带着这些问题,在本文中寻找答案,我将为您打开接口测试的大门。 1 初探接口测试 接口测试是什么。它检查数据的交换,传递和控制管理过程,它绕过了移动端,对服务端进行测

    2023年04月08日
    浏览(45)
  • 大数据开发的学习路线是什么样的

    大数据技术的体系庞大且复杂,每年都会涌现出大量新的技术,目前大数据行业所涉及到的核心技术主要就是:数据采集、数据存储、数据清洗、数据查询分析和数据可视化。 学习大数据需要掌握什么语言基础? 1、Java基础 大数据框架90%以上都是使用Java开发语言,所以如果

    2024年02月14日
    浏览(42)
  • 家电CRM是什么样的?系统功能解析

        CRM 系统管理软件出现以来按照企业规模和行业划分出现了不同的细分类型,家电 CRM 就是其中一种。本文将简要向您介绍, 家电 CRM 是什么,有什么功能、作用及其价格。 一、家电 CRM 概念 家电 CRM 是客户管理软件供应商为家电行业量身打造的一种客户关系管理系统。

    2024年02月05日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包