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

如果一个表单正在使用基于React JS的界面，并且以编程方式更改了输入字段值，那么如何以编程方式触发值更改事件？当输入值以编程方式改变时触发更改事件React

我知道DOM输入事件被转换为React中的合成更改事件。因此，这用于在输入元素上工作，它用于以编程方式输入输入值后启用表单中的按钮。

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

但是由于使用了React JS的更新版本，它不再工作了。任何理由为什么这不起作用？现在有什么替代方案？我甚至试图触发变化，焦点，模糊事件等事件，但都没有奏效。也试图改变属性的值，而不是说

inputElement.value = "test";

但还是事件的上述调度不灵。

来源

2017-08-13 Qwerty

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

我试图编程的形式肯定是使用React。这里的答案的最后一条评论似乎是说这不适用于特定版本的React，https://stackoverflow.com/a/31056122/1127547那么，替代方案是什么？我怎样才能改变道具（我已经改变了输入字段的值属性）或者状态来重新渲染窗体？ – Qwerty

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

请参阅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。

来源

2017-11-20 20:07:14

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

回答

相关问题