2016-06-26 12 views
0

Der Versuch, eine App zu erstellen, die Material Design Lite verwendet. Ich habe jedoch ein Problem festgestellt, bei dem das MDL-Menü nicht geöffnet wird.ReactJS- und MDL-Menü wird nicht angezeigt

Check this pen

Ich habe auch versucht, folgende this article, die das Reagieren und MDL beschreibt nicht schön spielen zusammen, und es ist notwendig, componentHandler zu nennen Elemente zu aktualisieren. In diesem Stift werden Komponenten jedoch nicht dynamisch geladen, daher sollten sie automatisch aktualisiert werden.

Wir freuen uns auf Ihre Antworten, danke!

+0

Es gibt tatsächlich ein paar Gründe, warum React und MDL nicht gut spielen. Das Problem besteht darin, dass React alle Ereignisse an den Dokumentkörper delegiert und ein SyntheticEvent anstelle des nativen Browserereignisses aus Kompatibilitätsgründen verwendet ([mehr Infos hier] (https://facebook.github.io) /react/docs/events.html)). Kurz gesagt: Wenn ein Ereignis für Ihre Komponente ausgelöst wird, ** wird Ihre Komponente als letztes davon gehört, sodass die aktualisierte MDL-Komponente kein Klickereignis erhält. Ich habe keine Lösung für Sie, aber vielleicht können Ihnen diese Informationen helfen, einen zu finden. –

Antwort

0

Sie müssen htmlFor anstelle von verwenden, wenn Sie React verwenden. Check it out.

<ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
     for="demo-menu-lower-left"> 

sollte sein:

<ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
     htmlFor="demo-menu-lower-left"> 

here den aktualisierten Stift See.

+0

Danke! Wusste nicht, dass es ein htmlFor-Attribut gab. – Enki