最近、Material Design Liteを React Web アプリケーションに統合しています。ほとんどの場合、すべてがうまく機能していますが、現在、React のイベント処理に問題があり、一部の MDL コンポーネントではうまく機能しないようです。
特に、ハンドラーを持つ DOM 要素がありますonClick。これは、MDL ツールチップが追加されるまで完全に正常に動作し、それによって が起動onClickしなくなります。私は可能な限りほぼすべてのバリエーションを試しました (ツールチップを DOM の別の場所に配置する、onClickツールチップを子として持つコンテナー div にハンドラーをアタッチするなど)、それを機能させることができないようです。
この問題を示す JSBin を次に示します (コンポーネントのマウント後に jQuery を使用して要素にクリック ハンドラーをバインドする例も含めましたが、これは実際に機能します)。
http://jsbin.com/sewimi/3/edit?js,output
これが機能しない理由についていくつかの理論がありますが、React または MDL のいずれかについて、それらのいずれかを検証するのに十分な知識がありません。
React がイベントを処理する方法と関係があると思いますが、何らかの理由で MDL が衝突しているようです。ドキュメントから：
React は、実際にはノード自体にイベント ハンドラーをアタッチしません。React が起動すると、単一のイベント リスナーを使用してトップ レベルですべてのイベントのリッスンを開始します。コンポーネントがマウントまたはアンマウントされると、イベント ハンドラーが内部マッピングに追加または削除されるだけです。イベントが発生すると、React はこのマッピングを使用してイベントをディスパッチする方法を認識します。マッピングにイベント ハンドラーが残っていない場合、React のイベント ハンドラーは単純なノーオペレーションです。
これにより、MDL が React のイベントの内部マッピングをいじっているように見えます。これにより、要素のクリックがノーオペレーションになります。繰り返しますが、これは完全な推測にすぎません。
誰にもこれについて何か考えがありますか？MDL ツールチップを使用するコンポーネントごとに手動でイベント リスナーをバインドする必要はありませんがcomponentDidMount(提供した JSBin の例で行ったように)、それが今の解決策です。
また、これが MDL 固有のバグかどうかわからなかったので、問題ページではなく、ここにこの質問を投稿することにしました。誰かが私もそこに投稿すべきだと思うなら、私に知らせてください。私はそれを行うことができます.
ありがとう！