当输入的值以编程方式更改时触发更改事件

Posted 2023-03-05

【中文标题】当输入的值以编程方式更改时触发更改事件

【英文标题】：Trigger change events when the value of an input changed programmatically React

【发布时间】：2018-01-21 09:50:45

【问题描述】：

如果表单使用的是基于 React JS 的界面，并且输入字段值以编程方式更改，如何以编程方式触发值更改事件？

我了解 DOM 输入事件在 React 中被转换为合成更改事件。 所以这用于输入元素，它用于在以编程方式输入输入值后启用表单中的按钮。

var event = new Event('input',  bubbles: true );
inputElement.dispatchEvent(event);

但由于使用了更新版本的 React JS，可能不再起作用。 为什么这不起作用的任何原因？ 现在有什么替代方案？我什至尝试触发诸如更改、焦点、模糊事件之类的事件，但它们都不起作用。 还尝试更改 value 属性而不是说

inputElement.value = "test";

但是上面的事件调度仍然不起作用。

【问题讨论】：

这不是 React，而是命令式编程。您需要更改道具或状态以重新呈现表单。

我试图以编程方式创建的表单肯定是使用 React。答案在这里的最后一条评论似乎说这在特定版本的 React 中不起作用，***.com/a/31056122/1127547 那么替代方案是什么？如何更改道具（我已经在更改输入字段的 value 属性）或状态以重新呈现表单？

使用setState。或者只是观看任何关于 React 的基本教程，这些教程将向您解释。

但是在以编程方式更改输入值并触发事件时，我不会使用 React。是否可以完全在 React 之外使用 setState 方法？对于基于 React 的表单，如何触发独立于 React 的事件。

我知道这不是正确的方法，但它确实有效。 import ReactTestUtils from 'react-dom/test-utils'; const element = document.activeElement; ReactTestUtils.Simulate.change(element);

【参考方案1】：

请参阅描述解决方案的this answer：

var setValue = Object.getOwnPropertyDescriptor(window.htmlInputElement.prototype, 'value').set;
setValue.call(input, 'my new value');

var e = new Event('input',  bubbles: true );
input.dispatchEvent(e);

这仅适用于input 标签；对于textarea，你需要HTMLTextAreaElement。

【讨论】：

非常感谢。这很有帮助。