React Synthetic Eventsを手動でディスパッチするにはどうしたらいいですか？

Question

私は多くのレガシーコードを持つ既存のプロジェクトにReactコンポーネントを追加しようとしています。

私が遭遇する1つの問題は、documentオブジェクトのイベント委任のためにハンドラーをアタッチすることです。残念ながら、従来のコードの多くは、クリックイベントを傍受してevent.stopPropagationを呼び出す前にドキュメントオブジェクトに（たとえば、クリックしたときに閉じるドロップダウンやモーダルを実装するなどの）処理するために呼び出されます。

clickイベントがインターセプトされると、イベントはReactのドキュメントレベルのイベントハンドラに伝播されず、イベントは自分のReactコンポーネントに委譲されません（コンポーネントの実際のDOM要素がDOMのインターセプト・エレメントを受け取り、実際に委譲されていないイベントを最初に受信します）。

だから...質問：Reactの合成イベントを、Reactのドキュメントレベルのイベントハンドラに当たっていなくても、手動でトリガする方法はありますか？または、単一のイベントハンドラを別の場所に移動または複製する方法はありますか？

私はリアクションコンポーネントのマウント後にjQueryを使用してイベントを追加することを検討していますが、可能であればそれをやりたいとは思いません。

Answer 1

あなたは何をしているかによって、コンポーネントの内部状態やフラックスのようなアーキテクチャを使用している場合はグローバルな状態に変化する可能性があります。したがって、これを念頭に置いて、ラッパーを作成し、コンポーネントをレンダリングし、実行したいラッパーをトリガーすることができます。例えば

：

function renderComponent(props={}) { 
    ReactDOM.render(<Component {...props} />, document.getElementById('elementId')); 
} 

は、あなたがクリックした後、反応コンポーネントのテキストの変更を作成する必要があり、ボタンを持っているとしましょう。

$('button#my-button').on('click', function(event){ 
    event.preventDefault(); 
    renderComponent({text: 'Hello world!'}); 
}); 

だから、あなたは、コンポーネントがtextプロパティを受け取る反応し、そしてそこには、テキストの変更を行うことができます。これはあなたができることのすばやく汚れた例です。