首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

IE11上的React - event.target.getAttribute("id")返回null

在IE11上,使用React框架时,event.target.getAttribute("id")返回null的原因是IE11不支持event.target.getAttribute方法。在React中,可以通过event.target.id来获取元素的id属性。

React是一个用于构建用户界面的JavaScript库,它通过组件化的方式使得开发者可以更方便地构建可复用的UI组件。React使用虚拟DOM来提高性能,并且具有高效的更新机制。

在前端开发中,React常用于构建单页应用、移动应用、响应式网站等。它具有以下优势:

  1. 组件化开发:React将UI拆分为独立的组件,使得开发者可以更好地管理和复用代码。
  2. 虚拟DOM:React使用虚拟DOM来减少对实际DOM的操作,提高页面渲染性能。
  3. 单向数据流:React采用单向数据流的数据流动方式,使得数据变更更加可控和可预测。
  4. 生态系统丰富:React拥有庞大的生态系统,有大量的第三方库和工具可供选择。

对于IE11上的React应用,可以通过event.target.id来获取元素的id属性。例如:

代码语言:txt
复制
function handleClick(event) {
  const id = event.target.id;
  console.log(id);
}

腾讯云提供了一系列与云计算相关的产品和服务,其中与前端开发相关的产品包括云服务器、云存储、云函数等。您可以通过以下链接了解更多腾讯云产品信息:

  • 腾讯云服务器:提供弹性计算能力,支持多种操作系统和应用场景。
  • 腾讯云存储:提供高可靠、低成本的对象存储服务,适用于存储和处理大规模非结构化数据。
  • 腾讯云函数:基于事件驱动的无服务器计算服务,可实现按需运行代码,无需管理服务器。

希望以上信息对您有所帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 16 中从 setState 返回 null 妙用

概述 在 React 16 中为了防止不必要 DOM 更新,允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。...React 16 对状态性能进行了改进,如果新状态值与其现有值相同的话,通过在 setState 中返回 null 来防止来触发更新。 ?...解决方案 以下是我们将要遵循步骤,来防止不必要重新渲染: 检查新状态值是否与现有值相同 如果值相同,我们将返回 null 返回 null 将不会更新状态和触发组件重新渲染 首先,在 app 组件...我在下面的两个 GIF 中突出显示了 React DevTools 中更新: ? 没有从 setState 返回 null ?...从 setState 返回 null 之后 注意:我在这里换了一个深色主题,以便更容易观察到 React DOM 中更新。

14.5K20

React技巧之设置data属性

el.removeAttribute('data-foo'); removeAttribute方法从元素中删除具有指定名称属性。如果元素不存在该属性,那么此方法直接返回而不抛出错误。...console.log(event.target.getAttribute('data-foo')); // ️ baz }; 而eventcurrentTarget属性让我们访问事件监听器所连接元素...import {useRef} from 'react'; export default function App() { const ref = useRef(null); const handleClick...该钩子返回一个可变ref对象,其.current属性被初始化为传递参数。 需要注意是,我们必须访问ref对象current属性,才能访问设置了ref属性button元素。...当我们为元素传递ref属性时,比如说, ,React将ref对象.current属性设置为对应DOM节点。

1.5K30

React 源码深度解读(五):首次自定义组件渲染 - Part 2

在学习 React 源码过程中,给我帮助最大就是这个系列文章,于是决定基于这个系列文章谈一下自己理解。本文会大量用到原文中例子,想体会原汁原味感觉,推荐阅读原文。...本系列文章基于 React 15.4.2 ,以下是本系列其它文章传送门: React 源码深度解读(一):首次 DOM 元素渲染 - Part 1 React 源码深度解读(二):首次 DOM 元素渲染...):单个元素更新 React 源码深度解读(十):Diff 算法详解 正文 一篇文章中,我们讲解到ReactCompositeComponent[ins]被初始化后,App[ins] render...方法被调用,生成 ReactElement 树,然后对应ReactDOMComponent[6]被返回。.... // 这里会调用 App 实例 render 方法,而 render 返回值是 React.createElement 嵌套调用。

38320

尤雨溪:Vue 3 将不会支持 IE11

无论是 React 或 Vue,当作者或者开发者想要对其做出大量变化或者添加新特性时,一般都需要撰写一个提案,提案里面需要包含这件事动机和详细设计。...React 在 2018 年 React Conf 提出React Hooks就是以 RFC 形式提出。...基于 Proxy 版本代码无法在 IE11 里运行。这不仅仅给我们带来了技术复杂性,同时也给开发者造成了持续心智负担。...这虽然在理论可行,但是带来了极大复杂性,因为它需要将两种实现混合在一起,而且增加了开发和生产环境行为不一致风险。...通过在 Vue 3 中支持 IE11,本质库作者也需要做同样决定。库作者不得不考虑他们库运行在哪种 Vue 3 版本(可能还得支持 Vue 2)。

1.4K10

getComputedStyle与currentStyle

其实defaultView返回是document 对象所关联 window 对象,如果没有,会返回 null。该属性为只读,IE 9 以下版本不支持 defaultView。...css样式,对于浏览器缺省设置、外部样式表以及内部样式表(位于 标签内部)都输出空字符串,而getComputedStyle会输出最终应用于该element最终样式,而不管该样式是内联还是外联还是浏览器默认...到目前本文撰写为止,IE最新浏览器IE11也保留该属性,也就是说IE9+浏览器既可以使用getComputedStyle也可以使用element.currentStyle属性。...在获取width、height等表示空间大小样式时,getComputedStyle一般都返回具体像素大小,比如“200px”,是一个绝对大小;而currentStyle返回有可能不是绝对值而是之前设置相对值...,比如“50%”等,以下为在IE11下对百度首页测试结果 其实在大部分情况下,width、height等绝对值对我们用处更大,而且currentStyle也只是微软自家属性,不是标准,所以在IE9

1.1K20

数往知来:一次浏览器兼容工作中知识点分析

react实现了组件化、用mobx管理状态、引入了fetch等promise异步工具,并且使用了一些日期选择和富文本编辑器插件等第三方库 --- 感觉IE就悬乎乎哒ㄟ( ▔, ▔ )ㄏ ?...--[if lte IE 9]> 您浏览器过于老旧, 请使用<a href="..."...判断真实IE版本 使用X-UA-Compatible设置遗留文档模式后,会带来新问题,那就是 navigator.userAgent 返回 MSIE 版本都是被模拟值,而真实浏览器版本难以判断了...[endif]--> 姥姥不疼:IE6-9发现了HTML条件注释但返回了false 舅舅不爱:IE11两种注释都不认 IE10同时满足两种注释交集 shim / sham / polyfill 这3个古怪单词一般都用来描述一些给浏览器打补丁第三方库...因此,一个polyfill就是一个用在浏览器API特殊shim 词源考:shim sham 发端于20世纪30年代非裔美国人社区一种踢踏舞。

1K10

React性能优化总结

将 prevProps 传入 render 方法返回结果一致则返回 true, 否则返回 false */} exportdefault React.memo(MyComponent,.../SomeComponent')); 使用 React.lazy 动态引入特性需要 JS 环境支持 Promise。在 IE11 及以下版本浏览器中需要通过引入 Polyfill 来使用该特性。...第一个参数就是一个函数,这个函数返回值会被缓存起来,同时这个值会作为 useMemo 返回值,第二个参数是一个数组依赖,如果数组里面的值有变化,那么就会重新去执行第一个参数里面的函数,并将函数返回值缓存起来并作为...通常,我们使用数据中 id 来作为元素 key,当元素没有确定 id 时候,万不得已你可以使用元素索引 index 作为 key 元素 key 只有放在就近数组上下文中才有意义。...例如,如果你提取出一个 ListItem 组件,你应该把 key 保留在数组中这个 元素,而不是放在 ListItem 组件中元素

78720

React常用5个UI框架

,风格素雅简洁,喜欢可以选择使用,目前在react技术栈领域使用较为广泛,各种文档也比较齐全,遇到问题好解决。...React UI 框架,组件用于更快速、更简便 web 开发,适合小团队,或者个人项目快速搭建前端界面,可以自定义主题,Github上面的star挺多,有超过Ant趋势,有空的话可以读一读源码,毕竟这么优秀框架...它在用户体验设计与Bootstrap和Foundation相比,更胜一筹,语义化前端 UI 框架,包含 50 多个组件。 ?...与 Twitter Bootstrap 一致外观与感受,但通过 Facebook React.js 框架获得更清爽代码。 ?...它针对在现代浏览器和IE11中运行桌面应用程序构建复杂,数据密集Web界面。一个 React UI 工具组件库。 ?

14.7K30

React源码解析之HostComponent更新(下)

前言 在上篇 React源码解析之HostComponent更新() 中,我们讲到了多次渲染阶段更新,本篇我们讲第一次渲染阶段更新 一、HostComponent(第一次渲染) 作用: (1)...属性:__reactEventHandlers$'+Math.random().toString(36).slice(2),方便从DOM实例获取props (5) 最后,返回该DOM元素: ?...源码解析之React.children.map() (5) 看下对标签处理: ① 执行ReactDOMSelectInitWrapperState(),在select对应DOM节点新建...(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) ) { //将 React style 里对象值转成...,了解下就好 九、shouldAutoFocusHostComponent 作用: 可以foucus节点会返回autoFocus值,否则返回false 源码: //可以 foucus 节点返回autoFocus

2.7K10

从 JavaScript、ES6、ES7 到 ES10,你学到哪儿了?

本质,这些功能经历了从 0 到 4 阶段,0 是最早阶段,而 4 是“准备发布”。 ?...但是有人发现 JS 显然并没有突然停留在 ES6 和 ES7 ,但是没有人问你个吗?这是你纠正问题机会!...第二个因素是经济:2000 年是互联网泡沫爆发一年。对于你们中最小孩子,想像一下几年前比特币,互联网初创公司在 90 年代后期是一样。...但是不支持 IE11 并不意味着你会失去 1.86% 受众群体,因为你应该考虑到人们能够切换浏览器,而且你目标受众群体实际使用 IE11 比例可能要低得多人员(例如:如果你定位是年轻人)或技术爱好者...与不支持 IE11 所失去金钱相比,支持 IE11 是否会给你带来更多收入?为 IE11 开发不只是使用 Babel。

1.6K20
领券