您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

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元素,你应该使用prototypeHTMLTextAreaElement类。

新的codepen示例

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

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

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

用一个例子做了一个codepen

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

现在,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

其他 2022/1/1 18:14:14 有619人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶