當輸入值以編程方式改變時觸發更改事件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

回答

相關問題