react事件对象属性显示null

最新推荐文章于 2023-10-17 17:10:47 发布
最新推荐文章于 2023-10-17 17:10:47 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： React 文章标签： 前端 javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javcp_q/article/details/123849469
版权

最近开始做react项目了

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

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

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

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

javscp_q
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6 generator函数与yield的理解、及在react项目中的使用
m0_45382009的博客
03-10 4166
1. yield是什么 yield是ES6的新关键字，使生成器函数执行暂停，将其后面的表达式的值以对象的形式返回。可以理解为生成器函数专有的return关键字。 yield关键字实际返回的是一个迭代器对象，{value:返回值,done:是否完成} yield无法单独工作，需要配合generator(生成器)的其他函数，如next。 先来个简单的例子： function* saleCount(){ var saleList = [1,5,9] for (var i
React复习（11）
weixin_46340162的博客
03-06 758
（1）redux-soga （2）获取用户信息案例 （3）soga内置的API （4）集中管理saga
react系列学习（二）——react-saga使用方法
lixiaonaaa的博客
12-09 5044
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 847
备注：个人学习。
总结：React学习梳理
w2009211777的专栏
04-25 3586
React梳理
react-quill的使用
02-25
React-Quill 组件的 props 可以配置富文本编辑器的各种属性，例如 defaultValue、theme 等： ```jsx ref={(el) => { this.reactQuillRef = el }} defaultValue={postRichText} key="1" id="textDiv1" theme=...
React源码思维导图
05-31
`createRef`是用来创建一个引用对象，它返回一个对象，初始`current`属性为`null`。这个引用对象可以用来在组件内部访问DOM元素或类组件的实例。 `forwardRef`允许父组件能够直接访问到子组件的方法。它接收一个...
react-reactchartistChartistjs的React组件
08-15
这里，`data`对象定义了图表的数据，`options`对象可以用来配置图表的各种属性，`type`属性指定了图表类型（如"Line"表示线图）。 3. **自定义和扩展**：React-chartist允许你通过传递额外的props来自定义图表的...
react-高德地图的React实现
08-15
在React开发中，集成地图功能是一项常见的需求，特别是在构建地理信息系统或者基于位置服务的应用...记住，关键在于理解React组件化思想与高德地图API的结合，以及如何在React生命周期方法中正确地调用和管理地图对象。
React中Ref 的使用方法详解
10-15
创建Ref对象并将其赋值给组件实例的属性，然后在`ref`属性中使用它： ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } ...
react dva 碎片01
Black Monkey
07-16 813
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的页面设计初探究
qq_57756904的博客
10-24 1604
import { PureComponent, Fragment } from 'react'; import { connect } from 'dva'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import Block from '@/custom/Block'; import { Card, Form, Button, Table, Divider, Input, Select, .
解决react项目中event对象打印的值为null
Djj_Alice的博客
12-22 1639
在做react项目的时候，发现event打印到控制台上的属性值均为null，如下图所示： 觉得挺奇怪的，怎么可能是null呢，但是在方法里面竟然又能获取到值，这样对调试很不利，有木有？ 其实真正的原因是因为React里面的事件并不是真实的DOM事件，而是自己在原生DOM事件上进行了封装与合成。 合成事件是由事件池来管理的，合成事件对象可能会被重用，合成事件的所有属性也会随之...
yield call() 来调用我们的数据接口
热门推荐
qq_38719039的博客
06-04 3万+
转载：https://www.toutiao.com/i6562040029974102532/         把我们定义的service引入进来，定义一个GET_USER_INFO的effects，注意这个函数名称前面要有“*”，然后在函数中通过yield call来调用我们的数据接口，yield表示同步调用，这个是generator提供的功能，大家有兴趣的可以自己搜索一下。这里有一个要注意的...
JS闭包产生条件、作用、生命周期
aolyu的博客
06-07 895
闭包1. 闭包的概念2. 闭包产生条件 1. 闭包的概念 闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用（子函数所在的夫函数的作用域不会被释放）。 2. 闭包产生条件 函数嵌套 例如： function A() { function B() { } } 内部函数引用了外部函数中的数据（属性、函数） 例如： function A() { var a = "a"; function B() { console.log(a); } } 执行外部函数（也可理解
React实现数据模拟请求(mock+modal+page+util)
qq_26896085的博客
11-03 928
首先写一个根目录下创建一个uitl/request.js,用于发送请求 request.js // import fetch from 'dva/fetch'; function checkStatus(response) { if (response.status >= 200 && response.status < 300) { re...
React 组件学习（函数组件、 类组件）
m0_62118859的博客
04-25 4453
目录 1. React 组件介绍 2. 函数组件 1）什么是函数组件？ 2）定义函数组件 3）使用组件 总结： 3. 类组件-复习 class 语法 1.掌握 class 定义类，定义属性，定义函数 2.掌握 extends 继承父类 4. 类组件-基本使用步骤 1.什么是类组件？ 2.定义类组件 3.使用类组件 总结： 5. 类组件-组件抽离 6. 类组件-无状态组件和有状态组件和 1.无状态组件 2.有状态组件 3.它们的区别 4.如何去选择 ...
react对象控制台输出 null 的问题
weixin_34015566的博客
03-20 761
react 中 event 对象控制台输出 null 的问题 在 react 中输出 event 对象，在控制台查看是 null 解决的办法很简单，在 console.log(event) 前使用 event 的 persist() 方法即可。 import React, { Component } from 'react'; class App extends Component { re...
react实现异步插件_初识react(四) react中异步解决方案之 redux-saga
weixin_33773996的博客
12-28 396
回顾今天demo是实现一个异步的计算器，探究redux-saga工作流程简介redux-saga 是一个 redux 的中间件，而中间件的作用是为 redux 提供额外的功能。由于在 reducers 中的所有操作都是同步的并且是纯粹的，即 reducer 都是纯函数，纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行过程中不会对外部产生副作用，即给它传什么，就吐出什么。但是在实际的应用开发...
react 后端返回时间为空为什么页面显示当前日期
07-14
在React中，当后端返回的时间为空时，页面显示当前日期的原因可能是因为你的代码中设置了一个默认值来代替空的时间值。这样，如果后端返回的时间为空，你的代码会使用默认值来显示当前日期。 请检查你的代码，特别是与时间相关的部分，查看是否设置了一个默认值。如果是这样，你可以尝试在后端返回的时间为空时，将默认值设为null或者不做任何处理，以便在页面上显示空的时间。 另外，还有可能是前端在渲染页面时对时间的处理方式导致的。你可以检查前端代码，确保在渲染页面时，针对空时间值的处理是正确的，不会默认显示当前日期。 如果以上方法都没有解决问题，建议检查后端接口返回数据的逻辑，确保后端返回的时间值正确无误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值