react事件对象属性显示null

最新推荐文章于 2024-09-20 00:50:57 发布

javscp_q

最新推荐文章于 2024-09-20 00:50:57 发布

阅读量1.3k

点赞数 1

分类专栏： React 文章标签：前端 javascript reactjs

本文链接：https://blog.csdn.net/javcp_q/article/details/123849469

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近开始做react项目了

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

javscp_q

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React源码分析7 — React合成事件系统

谢杨易的博客

03-10

1万+

1 React合成事件特点React自己实现了一套高效的事件注册，存储，分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比，它有如下特点 React组件上声明的事件最终绑定到了document这个DOM节点上，而不是React组件对应的DOM节点。故只有document这个节点上面才绑定了DOM原生事件，

「React源码分析」四. React DOM操作之CSS属性操作分析

u012922190的博客

10-25

1021

2021SC@SDUSC

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

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项目中event对象打印的值为null

Djj_Alice的博客

12-22

1709

在做react项目的时候，发现event打印到控制台上的属性值均为null，如下图所示：觉得挺奇怪的，怎么可能是null呢，但是在方法里面竟然又能获取到值，这样对调试很不利，有木有？其实真正的原因是因为React里面的事件并不是真实的DOM事件，而是自己在原生DOM事件上进行了封装与合成。合成事件是由事件池来管理的，合成事件对象可能会被重用，合成事件的所有属性也会随之...

React合成实事件中，事件参数 event 属性值为 null

不见浅诗的博客

07-13

902

本篇文章参考以下博文解决react项目中event对象打印的值为null 文章目录橘色蓝色红色绿色

在 React 16 中从 setState 返回 null 的妙用

weixin_34121304的博客

06-04

372

翻译：疯狂的技术宅原文：blog.logrocket.com/returning-n… 未经允许严禁转载概述在 React 16 中为了防止不必要的 DOM 更新，允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。我们将通过重构一个 mocktail （一种不含酒精的鸡尾酒）选择程序来探索它是如何工作的，即使我们选择相...

React属性与事件

y1512803764的博客

11-17

406

一、State属性 state 属性对模块来说属于自身属性初始化 state react中每个类都有一个构造函数 constructor()，初始化可放在构造函数中，通过 JSon 语法初始化 state constructor（）{ super(); //调用基类所有的初始化方法 this.state = {username : "Jaakko"

react 展示对象_React.js学习笔记(15) window对象 + ( element对象盒模型属性 ) + 滚动到最顶部按钮...

weixin_28709649的博客

12-30

926

(一) window对象(1) 概述在浏览器中，window对象(注意，w为小写)指当前的浏览器窗口。它也是所有对象的顶层对象。window对象，w是小写window对象，是所以对象的顶层对象顶层对象：指的是最高一层的对象，所有其他对象都是它的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。全局变量，window对象属性var a = 1;window.a /...

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

qq_52301431的博客

10-12

1098

时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。- React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的**虚拟事件对象** ，它拥有和原生事件对象相同的属性和方法。受控组件的值由props或state传入给受控组件（表单的输入框），用户在元素上交互或输入内容会引起应用state的改变。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到**

React-合成事件

最新发布

JavaZwb的博客

09-20

645

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

react对象控制台输出 null 的问题

weixin_34015566的博客

03-20

781

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

2186

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

3367

我们可以改造一下，对菜单数据里面的每个菜单项增加一个指向amispage的前缀，这样运营人员设计菜单的json文档的时候，就可以在path里面直接书写文件名了。这个页面承载了我们的设计思想，就是根据不同的path加载不同的json文件，那么这个页面就会频繁的被调用，它在路由里面是需要设置参数的，这个参数就是我们的json文件名。这样做的好处是，运营的时候可以交给不懂编程的运营人员直接修改，修改后的json格式schema上传后就可以了。依赖列表一个数组，一个变量名称组成的数组，是触发影响函数的依赖变量。

React复习（11）

weixin_46340162的博客

03-06

811

（1）redux-soga （2）获取用户信息案例（3）soga内置的API （4）集中管理saga

react系列学习（二）——react-saga使用方法

lixiaonaaa的博客

12-09

5106

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

dvaJs在react 项目中的简单使用

林夕

10-17

911

备注：个人学习。

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

m0_45382009的博客

03-10

4320

1. yield是什么 yield是ES6的新关键字，使生成器函数执行暂停，将其后面的表达式的值以对象的形式返回。可以理解为生成器函数专有的return关键字。 yield关键字实际返回的是一个迭代器对象，{value:返回值,done:是否完成} yield无法单独工作，需要配合generator(生成器)的其他函数，如next。先来个简单的例子： function* saleCount(){ var saleList = [1,5,9] for (var i

react dva 碎片01

Black Monkey

07-16

838

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 是一

React 事件处理

金溪的博客

06-13

217

(1)React事件的命名采用小驼峰式(camelCase), 而不是纯小写. (2)使用JSX语法时你需要传入一个函数作为事件处理函数, 而不是一个字符串. 传统的HTML <button onclick="activateLasers()"> Activate Lasers </button> 在React中 <button onClick={a...