2020/09/20 React中获取target（报错信息Warning: This synthetic event is reused for performance reasons.）

最新推荐文章于 2022-10-08 10:20:30 发布
原创 最新推荐文章于 2022-10-08 10:20:30 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个关于JavaScript点击事件处理的小技巧，特别是在使用合成事件时如何确保每次点击都能正确获取到目标元素，避免出现target为null的问题。

  • 如下图，我要获取到点击的li
    在这里插入图片描述react获取点击对象

  • 我的代码

  • return中的内容
    在这里插入图片描述

  • 函数
    在这里插入图片描述
    —这里要加上 event.persist()
    否则只有第一次点击能够获取到target，再次会报错，显示target:null,报错信息：Warning: This synthetic event is reused for performance reasons.

  • 本小白理解太粗泛了，要了解深入点的推荐看这篇
    https://www.jianshu.com/p/bf390141fae8

react - Ant Design Pro 报错Warning: React.createElement: type is invalid – expected a string (for buil
高级前端工程师
02-01 3019
react，ant design pro，react报错React.createElement，报错怎么办，详细解决办法，如何解决浏览器控制台报错，如何解决ant组件库报错，使用ant design pro创建组件时报错Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got
小技巧——yarn 报错 ： error An unexpected error occurred: “https://registry.npmjs.org/react: connect...
qq_43201350的博客
01-14 3216
小技巧——yarn 报错 ： error An unexpected error occurred: “https://registry.npmjs.org/react: connect...
React报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法
QC班长的博客
10-08 3791
使用React的NavLink标签作为菜单列表，点击菜单列表按钮，动态更换菜单名称。React报错Warning: This synthetic event is reused for performance reasons. If you're seeing this, 解决方法
react 初始化项目-创建表单
weixin_45561719的博客
02-19 564
import React from 'react' class Login extends React.Component{ constructor(props){ super(props); this.state = { userName: "", password: "" } } onChange = (e) => { this.setState({ [e.target.name] = e.target.value }) } onSubmit = (
react（18）——通过event.target获取标签结点
木子 旭的博客
01-30 2734
1.代码 <body> <div id="test"></div> <script type="text/babel"> 'use strict' class Demo extends React.Component{ showButton=(event)=>{ console.log(event.target);
react中异步函数的一个Synthetic Event Warning
王小胖的博客
03-16 2796
今天使用react开发项目时，遇到了一个警告，导致代码无法生效： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200316104128363.png Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessin...
[react] This synthetic event is reused for performance reasons. If you‘re seeing this, you‘re access
qubes的专栏
10-11 1334
error This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessing the property target on a released/nullified synthetic event. This is set to null. If you must solution e.persist()
【React】报错：react.development.js:315 Warning: React.createElement: type is invalid。。。
all_might1的博客
03-10 2223
目录 一、问题描述 二、问题原因分析 三、问题解决 四、总结 一、问题描述 今天写新需求的时候，老js文件中动辄几千行，前人把好多东西都揉在一起。想着新功能就写在新的js文件中好了。 于是引用了新的js文件，可是报出了如下错误 二、问题原因分析 隐约知道应该是引入方面或者是导出方面的问题，但是也没有准确定位到在哪里有问题 最后在网上检索了下相关问题，好像也不是很沾边 于是又看了看代码，很明显发现ctrl点击的时候不跳转，鼠标悬浮其上出现的信息有问题。那就一定是引..
React Next.js Ant Design antd 报错: Warning: Prop `className` did not match. Server:....
未将对象引用设置到对象的实例
03-12 2228
React + Next.js + Ant Design (antd) 浏览器console报错信息: Warning: Prop `className` did not match. Server: "anticon anticon-user ant-menu-item-icon" Client: "anticon anticon-user -item-icon" 问题分析 导入的方式不同, 不共享上下文 import { Menu } from 'antd'; // 这样导入 会报错这个错误
React Next.js styled-components 报错: Warning: Prop `className` did not match. Server:...
未将对象引用设置到对象的实例
03-12 3003
React + Next.js + StyledComponents 浏览器console报错信息: Warning: Prop `className` did not match. Server: "sc-gsDKAQ WHHak" Client: "sc-bdvvtL fKlryF" 大概就是 (hydrate) 水合注水失败了, 虽然是个 warning , 但 界面却是不正常的. 这个警告必须解决. 解决方案 Next.js 12.1 next.config.js 在compiler中添加sty
setState的一个Synthetic Event Warning
weixin_34088598的博客
11-27 292
今天使用React时遇到一个警告： Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified sy...
react初探-e.target为null
laishaojiang的博客
09-14 1668
在使用antd的input组件和mobx做一个很简单的功能，获取input中的输入内容，然后传给后端做查询，可偏偏就遇到奇奇怪怪的坑~ 删减后的代码大概长这样 import store from './store' class SearchForm extends Component { handleSearchInput = e => { console.log(e.target.value) } render() { return(
js原型方法 react target 与 currentTarget
qq_36258899的博客
03-13 645
target 与 currentTarget target:触发事件的元素。有可能是冒泡的元素 currentTarget : 事件绑定的元素。 收录说明：以前都是使用target，对于currentTarget没有什么概念，偶然编辑器自带函数有这个方法，是用之后，发现，这方法，可以不用去阻止冒泡，就是事件本身。每个事件都有原型，但是基本没太在意过这些属性。这也许是基础不好的原因。 ...
React 核心概念（3）
_
09-03 1889
React 核心概念（3）   1.事件处理   React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：（引自： 事件处理 ）   React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。   1.1 绑定事件   还记得在之前文章中我们写过的增加计数的 class 组件吗？我们这里会再一次用到： import React from 'reac
2022-02-28 学习记录--React-a标签写了target=‘_blank‘后报错的解决方法
weixin_48850734的博客
03-05 699
React-a标签写了target='_blank'后报错的解决方法
使用antd开发时遇上的onChange event为空的问题
热门推荐
zhuxinquan的博客
05-11 1万+
背景： 在使用React进行前端页面的开发，使用antd的Input组件时，本想利用onChange事件的event.target.value获取正在修改的值，但是一直报错为空，下面是控制台的报错信息： This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessi...
react+antd出现preventDefault()警告报错
卡卡罗特的博客
01-29 4733
react项目遇到如下报错： This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `preventDefault` on a released/nullified synthetic event. This is a no-op fun...
console.log(e)报错event.persist().
马农莎的博客
12-23 365
This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). 解决：
react中input的onChange事件会报错并取不到input的值的问题
weixin_42600496的博客
03-01 2736
<input onChange={this.handleInputChange}></input> handleInputChange = (e)=>{ console.log(e) } 这样操作时，控制台报错 Warning: This synthetic event is reused for performance reasons. If you'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值