react事件对象属性显示null

最新推荐文章于 2024-12-26 23:16:50 发布
最新推荐文章于 2024-12-26 23:16:50 发布
阅读量1.4k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： React 文章标签： 前端 javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/javcp_q/article/details/123849469
本文探讨了在React项目中遇到的问题：为什么在事件响应函数外部查看事件对象时其属性会显示为null。文中解释了React合成事件的工作原理，并介绍了如何使用event.persist()方法来保留事件对象的有效性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近开始做react项目了

获取事件对象，运行都正常，获取数据也正常，但想看里面的各个细节时，展开全是null

查阅资料发现react返回的是一个合成对象，在事件响应函数被调用后，所有的属性都会无效，所以在响应函数中获取数据没问题，但在浏览器中查看时或进行异步操作时，响应函数早执行完了，所以属性全是null

此时需要使用event.persist()，此方法会从池中移除合成事件，保留对事件的引用

但官方文档说v17以后event.persist()不再生效，因为合成事件对象不再放入事件池中，不过现在项目版本还是v16，等做到高版本的项目再更新吧

React 中 input 的 onChange 事件 e 参数传递之后 e.target 变为 null
weixin_34146410的博客
03-15 1万+
github 的地址 欢迎 star 前言 小明遇到了一个需求：在 input 框 change 的时候发起一个异步请求，对于请求一般做法都要防抖，但是却遇到了取不到 value 的值的情况。 简化代码可以查看 这里 关键代码： import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd....
【React进阶系列】史上最全React事件机制详解
kelai_6792的博客
10-19 1617
（1）命名规范不同React事件的属性名是采用驼峰形式的，事件处理函数是一个函数；原生事件通过addEventListener给事件添加事件处理函数（2）React事件只支持事件冒泡。原生事件通过配置第三个参数，true为事件捕获，false为事件冒泡（3）事件挂载目标不同React事件统一挂载到document上；原生事件挂载到具体的DOM上（4）this指向不同原生事件：1.如果onevent事件属性定义的时候将this作为参数，在函数中获取到该参数是DOM对象。
解决react项目中event对象打印的值为null
Djj_Alice的博客
12-22 1793
在做react项目的时候，发现event打印到控制台上的属性值均为null，如下图所示： 觉得挺奇怪的，怎么可能是null呢，但是在方法里面竟然又能获取到值，这样对调试很不利，有木有？ 其实真正的原因是因为React里面的事件并不是真实的DOM事件，而是自己在原生DOM事件上进行了封装与合成。 合成事件是由事件池来管理的，合成事件对象可能会被重用，合成事件的所有属性也会随之...
React合成实事件中，事件参数 event 属性值为 null
不见浅诗的博客
07-13 940
本篇文章参考以下博文 解决react项目中event对象打印的值为null 文章目录                   橘色 蓝色 红色 绿色
在 React 16 中从 setState 返回 null 的妙用
weixin_34121304的博客
06-04 388
翻译：疯狂的技术宅 原文：blog.logrocket.com/returning-n… 未经允许严禁转载 概述 在 React 16 中为了防止不必要的 DOM 更新，允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。 我们将通过重构一个 mocktail （一种不含酒精的鸡尾酒）选择程序来探索它是如何工作的，即使我们选择相...
React属性与事件
y1512803764的博客
11-17 430
一、State属性 state 属性对模块来说属于自身属性 初始化 state react中每个类都有一个构造函数 constructor()，初始化可放在构造函数中，通过 JSon 语法初始化 state constructor（）{ super(); //调用基类所有的初始化方法 this.state = {username : "Jaakko"
初窥门径：React中的事件机制
道阻且长
11-29 1310
在React中，合成事件（Synthetic Events）是一种跨浏览器的事件包装机制，旨在统一浏览器的事件处理方式，解决跨浏览器兼容性问题，并提供更高效、更一致的事件处理体验。React 的合成事件系统是在 React 的事件系统基础上构建的，它为 DOM 事件提供了一个标准化的接口，使得事件处理程序不需要考虑不同浏览器之间的差异。简单来说，它是对浏览器原生事件的一个封装。合成事件对象是 SyntheticEvent 的实例。
React-合成事件
JavaZwb的博客
09-20 723
其实 React 的事件机制就是一个典型的事件代理，将所有 DOM 节点的事件代理到根节点上统筹处理
如何使用React，透传各类组件能力/属性？
最新发布
Coding home - 漂流瓶jz
12-26 1143
函数式组件与类式组件在Props和事件透传的方式基本一致，但是ref透传的区别较大。直接对比的话，好像类式组件的透传能力更强一些，但是它把组件内部所有内容全暴露在外，违反了封装的原则，子组件内部的改动很容易影响父组件，不是一个好的设计。在React19版本中，ref属性也变成了prop，仅通过透传Props，就能实现透传组件大部分能力了。
React-class——React表单与事件（受控组件与非受控组件、事件类型、事件对象、事件绑定）、React组件生命周期、面试
qq_52301431的博客
10-12 1190
时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。- React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的**虚拟事件对象** ，它拥有和原生事件对象相同的属性和方法。受控组件的值由props或state传入给受控组件（表单的输入框），用户在元素上交互或输入内容会引起应用state的改变。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到**
react对象控制台输出 null 的问题
weixin_34015566的博客
03-20 810
react 中 event 对象控制台输出 null 的问题 在 react 中输出 event 对象，在控制台查看是 null 解决的办法很简单，在 console.log(event) 前使用 event 的 persist() 方法即可。 import React, { Component } from 'react'; class App extends Component { re...
react将函数作为参数传递然后回调
yuyeqianhen的博客
06-01 2274
父组件 import React, { Component } from 'react'; import DailyTrainyLeft from './DailyTrainLeft'; import DailyTrainRight from './DailyTrainRight'; /** * 日常训练模块 */ export default class DailyTrain extends Component { constructor(props) { super(props
设计React里面使用的Amis组件
Jimmy的专栏
11-02 3629
我们可以改造一下，对菜单数据里面的每个菜单项增加一个指向amispage的前缀，这样运营人员设计菜单的json文档的时候，就可以在path里面直接书写文件名了。这个页面承载了我们的设计思想，就是根据不同的path加载不同的json文件，那么这个页面就会频繁的被调用，它在路由里面是需要设置参数的，这个参数就是我们的json文件名。这样做的好处是，运营的时候可以交给不懂编程的运营人员直接修改，修改后的json格式schema上传后就可以了。依赖列表一个数组，一个变量名称组成的数组，是触发影响函数的依赖变量。
React复习（11）
weixin_46340162的博客
03-06 855
（1）redux-soga （2）获取用户信息案例 （3）soga内置的API （4）集中管理saga
react系列学习（二）——react-saga使用方法
lixiaonaaa的博客
12-09 5197
1，上一篇记录了redux，redux是同步的，既发出action指令后，reducer立即计算store，并返回。那么异步问题该如何解决？从后台请求获取的数据如何存储到store?这就是中间件的作用，也就是redux-saga的用处。 2，index文件同样是合并多个saga，便于管理代码，和reducer的合并一样 import {all} from 'redux-saga/effects'; import helloSaga from './helloSage'; import watchI
react dva 碎片01
Black Monkey
07-16 883
yield function *gen(){ yield { type: 'todos/add', payload: 'Learn Dva1' }; yield { type: 'todos/add', payload: 'Learn Dva2' }; yield { type: 'todos/add', payload: 'Learn Dva3' }; } // gen 是一
dvaJs在react 项目中的简单使用
林夕
10-17 985
备注：个人学习。
ES6 generator函数与yield的理解、及在react项目中的使用
m0_45382009的博客
03-10 4506
1. yield是什么 yield是ES6的新关键字，使生成器函数执行暂停，将其后面的表达式的值以对象的形式返回。可以理解为生成器函数专有的return关键字。 yield关键字实际返回的是一个迭代器对象，{value:返回值,done:是否完成} yield无法单独工作，需要配合generator(生成器)的其他函数，如next。 先来个简单的例子： function* saleCount(){ var saleList = [1,5,9] for (var i
React 事件处理
金溪的博客
06-13 244
(1)React事件的命名采用小驼峰式(camelCase), 而不是纯小写. (2)使用JSX语法时你需要传入一个函数作为事件处理函数, 而不是一个字符串. 传统的HTML <button onclick="activateLasers()"> Activate Lasers </button> 在React中 <button onClick={a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值