[解決済み] react jsでonchangeイベントを発生させる最良の方法は何ですか？

質問

Backbone + ReactJSのバンドルを使って、クライアントサイドのアプリを構築しています。 主に悪名高い valueLink に依存し、双方向バインディングのための ReactJS インターフェースをサポートする独自のラッパーを介して、値をモデルに直接伝播させます。

ここで問題に直面しました。

私たちは jquery.mask.js プラグインがあり、これは入力値をプログラムでフォーマットするため、React イベントを発生させません。このため、モデルが を受け取ることになります。 の値を受け取り フォーマットされたものを見逃す をプラグインから取得します。

Reactはブラウザによって多くのイベント処理戦略を持っているようです。特定のDOM要素の変更イベントをReactに通知する一般的な方法はありますか？

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

React 16とReact >=15.6について。

セッター .value= は React ライブラリが入力値セッターを上書きしてしまうため、思い通りに動作しませんが input をコンテキストとして直接呼び出すことができます。

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'react 16 value');

var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);

textarea要素には prototype の HTMLTextAreaElement クラスと同じです。

新しい コードペンの例 .

すべてのクレジットは この投稿者 と この人の解決策

React <=15.5 だけの古い回答です。

とは react-dom ^15.6.0 を使うことができます。 simulated フラグを使用すると、イベントを通過させるためにイベントオブジェクトに

var ev = new Event('input', { bubbles: true});
ev.simulated = true;
element.value = 'Something new';
element.dispatchEvent(ev);

を作りました。 のコードペンを作成しました。

なぜ新しいフラグが必要なのかを理解するために、私は このコメント が非常に役に立ちました。

Reactの入力ロジックはchangeイベントをdedupeするようになったので、値ごとに複数回発火することはありません。 が発生しないようにしました。ブラウザの onChange/onInput イベントの両方をリッスンします。 イベントと、DOM ノードの値のプロパティのセット (JavaScriptで値を更新したとき) の両方をリスンします。 の値を更新したとき）。このことは、次のような副作用があります。 入力の値を手動で更新する場合 input.value = 'foo' とし、次のようにディスパッチします。 ChangeEvent with { target: input } をディスパッチします。React は set と event の両方を登録します。 とイベントの両方を登録し、値がまだ `'foo' であることを確認すると、重複する イベントとみなし、それを飲み込みます。

これは通常のケースでは問題なく動作します。 イベントは、element.value のセットをトリガーしないためです。このロジックから抜け出すには このロジックを回避するには、発生させるイベントにシミュレートフラグを付けます。 フラグを付けると、react は常にそのイベントを発生させます。 https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128