Vor kurzem habe ich Material Design Lite in meine React-Webanwendung integriert. Zum größten Teil hat alles gut geklappt, aber zur Zeit habe ich Probleme mit der Ereignisbehandlung von React, was bei einigen MDL-Komponenten nicht gut zu sein scheint.
Insbesondere habe ich ein DOM-Element mit einem onClick -Handler, was völlig in Ordnung ist, bis ein MDL-Tooltip hinzugefügt wird, wodurch onClick nicht mehr ausgelöst wird. Ich habe so ziemlich jede mögliche Variante ausprobiert (die Tooltip irgendwo anders im DOM platzieren, den onClick Handler an ein Container-div anhängen, das den Tooltip als Kind hat, usw.), und ich kann es einfach nicht bekommen arbeiten.
Hier ist ein JSBin, der das Problem demonstriert (ich habe auch ein Beispiel hinzugefügt, das jQuery verwendet, um einen Klick-Handler an das Element zu binden, nachdem die Komponente geladen wurde, was tatsächlich funktioniert):
Ich habe einige Theorien, warum das nicht funktioniert, aber ich weiß nicht genug über React oder MDL, um einige von ihnen zu überprüfen.
Ich glaube, es hat etwas damit zu tun, wie React Ereignisse behandelt, und aus irgendeinem Grund scheint MDL damit zu kollidieren. Aus der Dokumentation :
React fügt Ereignishandler den Knoten selbst nicht tatsächlich an. Wenn React gestartet wird, beginnt es alle Ereignisse oben zu überwachen level mit einem einzelnen Ereignis-Listener. Wenn eine Komponente montiert ist oder abgehängt, werden die Eventhandler einfach hinzugefügt oder entfernt interne Zuordnung Wenn ein Ereignis eintritt, weiß React, wie es zu versenden ist Verwenden Sie diese Zuordnung. Wenn keine Ereignisbehandlungsroutinen mehr vorhanden sind Mapping, Reacts Event-Handler sind einfache No-Ops
Es scheint so, als würde MDL mit der internen Zuordnung von Ereignissen durch React zu tun haben, was dazu führt, dass mein Klick auf das Element zu einem No-Op wird. Aber nochmal, das ist nur eine komplette Schätzung.
Hat jemand irgendwelche Ideen dazu? Ich würde es vorziehen, nicht manuell einen Ereignis-Listener in componentDidMount für jede meiner Komponenten zu binden, die MDL-Tooltips verwenden (wie ich es im Beispiel JSBin gemacht habe), aber das ist die Lösung, für die ich jetzt vorgehe.
Da ich mir nicht sicher war, ob es sich um einen MDL-spezifischen Fehler handelte, habe ich mich dafür entschieden, diese Frage hier anstatt auf ihrer Probleme Seite. Wenn jemand denkt, ich sollte es auch dort posten, lass es mich wissen, und ich kann das tun.
Danke!
Ich sah mich auch diesem Thema gegenüber. Ich habe versucht, Ereignisklicks auf einem mdl-menu__item zu erfassen. Und Sie haben Recht, dass das synthetische Ereignissystem von React kollidiert.
Wenn innerhalb Ihrer React-Komponente ein Ereignis eintritt, wird Ihre Komponente als letztes vom Ereignis hören. Meine Arbeit war Umgehung reagiert Ereignis und verwenden eine Reaktionskomponente, die hilft, native Ereignisse anzuhängen react-native-listener .
Meine Lösung war für das MDL-Menü, aber ich bin mir sicher, dass es auch für den Tooltip gilt.
Ein bisschen spät, aber
%Vor%ruft dynamisch geladene Elemente auf.
Hinweis: Wenn Sie das Zielelement über die CSS-Position bewegen, wird der Tooltip nicht automatisch an die neue Position gerendert, sondern Sie müssen ihn auch identifizieren und positionieren.
Tags und Links javascript reactjs material-design-lite