react事件对象属性显示null

最新推荐文章于 2024-12-26 23:16:50 发布

原创最新推荐文章于 2024-12-26 23:16:50 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #reactjs

React 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在React项目中遇到的问题：为什么在事件响应函数外部查看事件对象时其属性会显示为null。文中解释了React合成事件的工作原理，并介绍了如何使用event.persist()方法来保留事件对象的有效性。

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

最近开始做react项目了

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

javscp_q

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

1621

（1）命名规范不同React事件的属性名是采用驼峰形式的，事件处理函数是一个函数；原生事件通过addEventListener给事件添加事件处理函数（2）React事件只支持事件冒泡。原生事件通过配置第三个参数，true为事件捕获，false为事件冒泡（3）事件挂载目标不同React事件统一挂载到document上；原生事件挂载到具体的DOM上（4）this指向不同原生事件：1.如果onevent事件属性定义的时候将this作为参数，在函数中获取到该参数是DOM对象。

参与评论您还未登录，请先登录后发表或查看评论

解决react项目中event对象打印的值为null

Djj_Alice的博客

12-22

1794

在做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

1312

在React中，合成事件（Synthetic Events）是一种跨浏览器的事件包装机制，旨在统一浏览器的事件处理方式，解决跨浏览器兼容性问题，并提供更高效、更一致的事件处理体验。React 的合成事件系统是在 React 的事件系统基础上构建的，它为 DOM 事件提供了一个标准化的接口，使得事件处理程序不需要考虑不同浏览器之间的差异。简单来说，它是对浏览器原生事件的一个封装。合成事件对象是 SyntheticEvent 的实例。

React-合成事件

JavaZwb的博客

09-20

723

其实 React 的事件机制就是一个典型的事件代理，将所有 DOM 节点的事件代理到根节点上统筹处理

如何使用React，透传各类组件能力/属性？

最新发布

Coding home - 漂流瓶jz

12-26

1145

函数式组件与类式组件在Props和事件透传的方式基本一致，但是ref透传的区别较大。直接对比的话，好像类式组件的透传能力更强一些，但是它把组件内部所有内容全暴露在外，违反了封装的原则，子组件内部的改动很容易影响父组件，不是一个好的设计。在React19版本中，ref属性也变成了prop，仅通过透传Props，就能实现透传组件大部分能力了。

React-class——React表单与事件（受控组件与非受控组件、事件类型、事件对象、事件绑定）、React组件生命周期、面试

qq_52301431的博客

10-12

1191

时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。- 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

2276

父组件 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

3635

我们可以改造一下，对菜单数据里面的每个菜单项增加一个指向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

884

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

986

备注：个人学习。

ES6 generator函数与yield的理解、及在react项目中的使用

m0_45382009的博客

03-10

4508

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...