どうやらReactは、Component.onChangeのリスナーをDOM element.oninputイベントに関連付けるようだ。
つまり、Reactのonchangeイベントは、javaScriptのoninputと同じ挙動になるらしい。
※javaScriptのイベントハンドラ
onchange - フォーカスを外したタイミングで発火する
oninput - フォームに入力があるごとに発火する
以下React公式ドキュメントから引用。
しがたってjavaScriptのonChangeイベントと同じだと思って使用すると
ユーザーの入力後にイベントを発火させたい時はうまくいかない。
これを実現するには、onBlurを使えば良いが
値が手動で変更されたことを確認する必要もある。
あとはシチュエーションによって、工夫する必要がありそう。
参考文献
・Reactでは、onChangeとonInputの違いは何ですか？
・React の input でユーザ入力完了後に処理したい