問題タブ [material-design-lite]

Android の Web ビューで MDL を使用してビルドしたサイトを表示したいのですが、Javascript を有効にするとすぐに Web ビューに空白のページが表示されます。これは、getmdl.io テンプレートの例を使用しても発生します。

最近、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 固有のバグかどうかわからなかったので、問題ページではなく、ここにこの質問を投稿することにしました。誰かが私もそこに投稿すべきだと思うなら、私に知らせてください。私はそれを行うことができます.

ありがとう！

マテリアルライトページの1つで不確定な読み込みを使用しています。問題は、全体の長さが適用されていないことです。

クラス「mdl-grid」でdivを使用しており、その中でクラス「mdl-cell mdl-cell--12-col」で別のdivを使用しています。この内側の div では、実際に進行状況バーの div を使用しています。

次の HTML コードを使用しています。

その出力は次のようになります: using-12Col-div

ご覧のとおり、div の全体の長さ、つまり 100% を取っているわけではありません

しかし、それでも同じ幅を取っています。

同じコードペンはここにあります。

不確定プログレスバーを使用して割り当てられた全体の長さを取得する方法についてのヘルプは、非常に高く評価されます。

私は ReactJs で遊んでいてcomponentHandler.upgradeDom()、各componentDidMount()ハンドラーを呼び出す必要があります。

upgradeDomグローバルに定義されたものを呼び出す必要がcomponentHandlerなく、代わりに webpack を使用してマテリアル デザイン ライトをモジュールとしてインポートする方法はありますか?

それはうまく運営されています：

しかし、今は機能していません:

2 つのコード ブロックの違いは単なるmdl-layout--fixed-headerクラスです。固定ヘッダーを使用するには、挿入されたクラスmdl-layout--fixed-headerがドロワーの作業を停止します。この使い方で問題はありませんか？

ページを更新した後、最初のボタンのアニメーションが機能しない理由を知っていますか? 最初のボタンをクリックすると、ボタンの影だけが表示されますが、アニメーションは機能しません。よろしくお願いします。