個別に構築された反応コンポーネントからjqueryとハンドルバーを使用してレンダリングされたボタンのイベントを処理する方法は？

Question

最近jquery + handlebarsを使用してレンダリングされるページで反応コンポーネントをWebサイトに統合しています。 ウェブサイトの一部に前述のjquery +ハンドルバーを使用してレンダリングされた商品リストがあります。商品リストの各項目にボタンがあります

私が達成しようとしているのは、 jqueryは、reactjsアプリケーション/コンポーネント内でプロダクトリストをレンダリングしました。

これはどのように達成できますか？おかげ

例えば、これは私の製品リストnodejsアプリケーションで+ jqueryの

<ul> 
    <li><button class="message">message</button></li> 
<li><button class="message">message</button></li> 
<li><button class="message">message</button></li> 
</ul> 

をハンドルバーを使用してレンダリングされ、その後、私が個別に構築していると仮定すると、アプリケーション/コンポーネントの反応生成反応するアプリを使用して作成しました。どのように私はDOMにアクセスし、これらのボタンのクリックイベントを処理するのですか？これを達成する最良の方法は何ですか？

Answer 1

フレームワークレスJSとまったく同じ方法です。次の例のように、あなたのリアクトコンポーネントのライフサイクルのいずれかの方法でそれを行うことができます。

componentDidMount() { 
    document.querySelector("button.message...").addEventListener("click", event => 
    this.handleMessageButtonClick()) 
} 

あなたはしかし、class="message"で複数のボタンを区別する方法が必要になります。 そしてリスナーを削除することを忘れないでくださいcomponentWillUnmount()