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系になって突然使えなくなるという可能性もある。
こういうコード、プロダクションコードには入れないようにしようね。