[解決済み] ReactのonChangeとonInputの違いは何ですか？

質問

これに対する答えを探し回りましたが、そのほとんどはReactのコンテキスト外であり、そこで onChange がブラーの際にトリガーとなります。

さまざまなテストを実行しても、この 2 つのイベントが (textarea に適用された場合) どのように異なるのかがわからないようです。どなたか、これについて何らかの光を当てていただけませんか?

どのように解決するのですか?

特に違いはないようです。

React は、なぜかリスナーを Component.onChange を DOM にアタッチします。 element.oninput のイベントと同じです。フォームに関するドキュメントの注釈を参照してください。

React docs - フォーム

この動作に驚いている人がもっといます。詳細については、React issue tracker のこの issue を参照してください。

React の onChange が onInput にどのように関連するかを文書化する #3964

その問題のコメントから引用します。

ReactがなぜonChangeをonInputのような動作にしたのか理解できない。私が知る限りでは、以前の onChange の動作を取り戻す方法はありません。ドキュメントでは、これは「誤称」であるとされていますが、実際にはそうではなく、変更があったときに発生しますが、入力もフォーカスを失うまでは発生しません。

検証のために、時には、入力が終わるまで検証エラーを表示したくないことがあります。あるいは、キーストロークごとに再レンダリングしたくない場合もあります。現在、これを行う唯一の方法は onBlur ですが、値が変更されたことを手動で確認する必要があります。

それほど大きな問題ではありませんが、Reactが有用なイベントを捨てて、これを行うイベントがすでにあったのに標準的な動作から逸脱したように私には思えます。

コメントに100％同意します...。しかし、この動作に依存する多くのコードがすでに書かれていたので、今それを変更すると、解決するよりも多くの問題をもたらすと推測します。

React は公式の Web API コレクションの一部ではありません。

ReactがJSの上に構築され、大きな採用率を見たとしても、技術としてのReactは、それ自身の（かなり小さな）APIの下に多くの機能を隠すために存在しています。これが顕著なのがイベントシステムで、標準的なDOMイベントシステムとは根本的に異なることが、表面下でたくさん行われています。どのイベントが何をするかという点だけでなく、イベント処理のどの段階でデータを持続させるかという点でもそうです。それについては、こちらで詳しく説明しています。

Reactイベントシステム