反応jsでonchangeイベントをトリガーする最良の方法は何ですか

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

今私たちは問題に直面しました：

我々は持っているjquery.mask.js、プログラムのでそれは火がイベントを反応しない入力値をフォーマットプラグインを。これはすべて、モデルがユーザー入力からフォーマットされていない値を受け取り、プラグインからフォーマットされた値を見落とす状況につながります。

Reactにはブラウザによってはたくさんのイベント処理戦略があるようです。Reactがそれを聞くことができるように、特定のDOM要素の変更イベントをトリガーする一般的な方法はありますか？

React 16およびReact> = 15.6の場合

.value=Reactライブラリは入力値セッターをオーバーライドするため、セッターは期待どおりに機能しませんが、inputasコンテキストで関数を直接呼び出すことができます。

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クラスを使用する必要があります。

新しいcodepenの例。

この貢献者と彼のソリューションへのすべてのクレジット

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の入力ロジックは、重複排除の変更イベントを重複排除するため、値ごとに2回以上発生しません。これは、ブラウザーのonChange / onInputイベントと、DOMノード値プロップ（JavaScriptを介して値を更新するとき）のセットの両方をリッスンします。これには、入力の値を手動で更新する場合にinput.value = 'foo'から{target：input}を使用してChangeEventをディスパッチするという副作用があります。Reactは、セットとイベントの両方を登録します。 '、それを重複イベントと見なし、それを飲み込みます。

「実際の」ブラウザで開始されたイベントはelement.valueのセットをトリガーしないため、これは通常のケースでは正常に機能します。トリガーするイベントにシミュレートされたフラグでタグを付けることにより、このロジックを密かに救済でき、反応すると常にイベントが発生します。 https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128

少なくともテキスト入力でonChangeは、入力イベントをリッスンしているようです：

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

私はこの答えが少し遅れることを知っていますが、最近同様の問題に直面しました。ネストされたコンポーネントでイベントをトリガーする必要がありました。ラジオとチェックボックスタイプのウィジェット（チェックボックスやラジオボタンのように動作するdivでした）のリストがあり、誰かがツールボックスを閉じた場合は、チェックを外す必要がありました。

私はこれがベストプラクティスであるかどうかはわかりませんが、かなり簡単な解決策を見つけましたが、うまくいきます。

var event = new MouseEvent('click', {
 'view': window, 
 'bubbles': true, 
 'cancelable': false
});
var node = document.getElementById('nodeMyComponentsEventIsConnectedTo');
node.dispatchEvent(event);

これによりdomNodeでクリックイベントがトリガーされ、reactを介してアタッチされた私のハンドラーが実際に呼び出されたため、誰かが要素をクリックした場合に期待するように動作します。私はonChangeをテストしていませんが、動作するはずです。これが本当に古いバージョンのIEでどのように機能するかはわかりませんが、MouseEventは少なくともIE9以降でサポートされていると思います。

私のコンポーネントは非常に小さく（私はまだそれを学習しているので、アプリケーションの一部のみが反応に使用されました）、domノードへの参照を取得せずに別の方法で同じことを達成できるため、私は最終的にこれから私の特定のユースケースに移りました。

更新：

他の人がコメントで述べthis.refs.refnameたように、domノードへの参照を取得するために使用することをお勧めします。この場合、refnameはを介してコンポーネントにアタッチした参照です<MyComponent ref='refname' />。

ReactTestUtilsを使用してイベントをシミュレートできますが、これは単体テスト用に設計されています。

この場合はvalueLinkを使用せず、プラグインによって発生した変更イベントをリッスンし、それに応じて入力の状態を更新することをお勧めします。双方向バインディングは、何よりもデモとしてのutilsです。これらは、純粋な双方向バインディングがほとんどのアプリケーションに適切ではなく、通常、アプリでの相互作用を記述するためにより多くのアプリケーションロジックが必要であることを強調するためだけにアドオンに含まれています。

これは、Grin / Dan Abramovからの回答を拡張して、複数の入力タイプにわたって機能します。Reactでテスト済み> = 15.5

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

export const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        const event = new Event('input', { bubbles: true });

        setValue.call(node, value);
        node.dispatchEvent(event);

    }

};

任意の要素で変更イベントをトリガーすると、コンポーネント間の依存関係が作成され、その理由を推測することが困難になります。Reactの一方向のデータフローを使用することをお勧めします。

Reactの変更イベントをトリガーする単純なスニペットはありません。ロジックはChangeEventPlugin.jsに実装されており、さまざまな入力タイプとブラウザーに応じてさまざまなコードブランチがあります。さらに、実装の詳細はReactのバージョンによって異なります。

私はそれを行うreact-trigger-changeを構築しましたが、それはプロダクションの依存関係としてではなく、テストのために使用することを意図しています：

let node;
ReactDOM.render(
  <input
    onChange={() => console.log('changed')}
    ref={(input) => { node = input; }}
  />,
  mountNode
);

reactTriggerChange(node); // 'changed' is logged

CodePen

関数を使用してonchangeイベントを処理するので、次のようにすることができます。

class Form extends Component {
 constructor(props) {
  super(props);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
  this.state = { password: '' }
 }

 aForceChange() {
  // something happened and a passwordChange
  // needs to be triggered!!

  // simple, just call the onChange handler
  this.handlePasswordChange('my password');
 }

 handlePasswordChange(value) {
 // do something
 }

 render() {
  return (
   <input type="text" value={this.state.password} onChange={changeEvent => this.handlePasswordChange(changeEvent.target.value)} />
  );
 }
}

私はこれをReactのGithubの問題で見つけました：魅力のように機能します（v15.6.2）

これがテキスト入力に実装する方法です：

changeInputValue = newValue => {

    const e = new Event('input', { bubbles: true })
    const input = document.querySelector('input[name=' + this.props.name + ']')
    console.log('input', input)
    this.setNativeValue(input, newValue)
    input.dispatchEvent(e)
  }

  setNativeValue (element, value) {
    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set
    const prototype = Object.getPrototypeOf(element)
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(
      prototype,
      'value'
    ).set

    if (valueSetter && valueSetter !== prototypeValueSetter) {
      prototypeValueSetter.call(element, value)
    } else {
      valueSetter.call(element, value)
    }
  }

の場合HTMLSelectElement、つまり<select>

var element = document.getElementById("element-id");
var trigger = Object.getOwnPropertyDescriptor(
  window.HTMLSelectElement.prototype,
  "value"
).set;
trigger.call(element, 4); // 4 is the select option's value we want to set
var event = new Event("change", { bubbles: true });
element.dispatchEvent(event);

BackboneとReactを使用している場合は、次のいずれかをお勧めします。

• Backbone.React.Component
• react.backbone

どちらも、バックボーンモデルとコレクションをReactビューと統合するのに役立ちます。バックボーンビューと同じように、バックボーンイベントを使用できます。私は両方を試してみましたが、一方がミックスインであり、もう一方がに変更さReact.createClassれていることを除いて、ほとんど違いはありませんでしたReact.createBackboneClass。