Reactで作られたinputタグに対して、外部からonChangeを発火させたい

Reactを使っているサイトに対して、デバッグ目的や、ちょとした出来心で、外部からonChangeを発火させたい、トリガーさせたい、となることがあるだろうか。
私はある。

本家のIssueを見てみると、Reactのバージョン15系と16系では方法が違うことが分かった。

https://github.com/facebook/react/issues/11488

まとめると、

React 15系

イベントオブジェクトにsimulatedという特殊なプロパティがあり、それをtrueにするとできるっぽい。
イベントオブジェクトのbubbles: trueも必須。

const element = document.querySelector(".target-form")
const event = new Event('input', { bubbles: true})
event.simulated = true
element.value = "設定したいvalue"
element.defaultValue = "設定したいvalue"
element.dispatchEvent(event)

React 16系

_valueTrackerをいじくって、値の変更をトリガさせるらしい。

const element = scrollEl.querySelector('.target-form')
element.value = "設定したいvalue"
element._valueTracker.setValue('')
element.dispatchEvent(new Event('input', { bubbles: true }));

これで無事に外部から onChange をトリガーすることができた。
めでたしめでたし。

注意

結局16系の方法も、非公式な手段デあることには変わりないので、17系になって突然使えなくなるという可能性もある。
こういうコード、プロダクションコードには入れないようにしようね。

タイトルとURLをコピーしました