栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在React JS中触发onchange事件的最佳方法是什么

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在React JS中触发onchange事件的最佳方法是什么

对于React 16和React > = 15.6

设置

.value=
器无法正常工作,因为React库会覆盖输入值设置器,但是我们可以直接在
input
as上下文中调用该函数。

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;nativeInputValueSetter.call(input, 'react 16 value');var ev2 = new Event('input', { bubbles: true});input.dispatchEvent(ev2);

对于textarea元素,你应该使用

prototype
HTMLtextareaElement
类。

新的prepen示例。

所有学分这个贡献者和他的解决方案

仅适用于React <= 15.5的过时答案

有了

react-dom ^15.6.0
您可以使用
simulated
标志事件对象的事件经过

var ev = new Event('input', { bubbles: true});ev.simulated = true;element.value = 'Something new';element.dispatchEvent(ev);

我用一个例子做了一个prepen

为了理解为什么需要新标记,我发现此注释非常有帮助:

现在,React中的输入逻辑对重复事件的重复事件进行重复数据删除,因此每个值不会触发多次。它侦听浏览器的onChange /
onInput事件以及DOM节点值prop上的设置(当您通过javascript更新值时)。这具有副作用,即如果您手动更新输入的值,则input.value
=’foo’然后使用{target:input}分派一个ChangeEvent React将同时注册集合和事件,看到它的值仍然是’‘foo
‘,将其视为重复事件并吞下。

在正常情况下,这可以正常工作,因为浏览器启动的“真实”事件不会触发element.value上的设置。您可以通过使用模拟标志标记触发的事件来暗中逃避此逻辑,并且反应将始终触发该事件。
https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/372907.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号