Material Design Lite + React - Problemi con i tooltip

Question

Recentemente, ho integrato Material Design Lite nella mia applicazione web React. Per la maggior parte, tutto ha funzionato bene, ma attualmente sto avendo alcuni problemi con la gestione degli eventi di React, che non sembra funzionare bene con alcuni componenti MDL.

In particolare, ho un elemento DOM con un gestore onClick, che funziona perfettamente bene, fino a quando non viene aggiunto un suggerimento MDL, il che fa sì che onClick non si attivi più. Ho provato praticamente ogni variazione possibile (metti il ​​tooltip da qualche altra parte nel DOM, allega il gestore onClick a un contenitore div che ha il tooltip come un bambino, ecc.) E non riesco proprio a farlo funzionare .

Ecco un JSBin che dimostra la questione (Ho anche incluso un esempio che utilizza jQuery per associare un gestore di scegliere l'elemento dopo i monti dei componenti, che in realtà fa il lavoro):

http://jsbin.com/sewimi/3/edit?js,output

Ho alcune teorie sul motivo per cui questo non funziona, ma non ne so abbastanza su React o MDL per verificare nessuno di loro.

Credo che abbia qualcosa a che fare con il modo in cui React gestisce gli eventi e, per qualche motivo, MDL sembra essere in conflitto con esso. Da documentation:

React in realtà non associa gestori di eventi ai nodi stessi. All'avvio di React, inizia l'ascolto di tutti gli eventi al livello superiore utilizzando un singolo listener di eventi. Quando un componente viene montato o smontato , i gestori eventi vengono semplicemente aggiunti o rimossi da un mapping interno . Quando si verifica un evento, React sa come inviarlo usando questa mappatura. Quando non ci sono gestori di eventi a sinistra nella mappatura , di Reagire gestori di eventi sono semplici no-ops

Questo fa sembrare come MDL potrebbe essere scherzi con del Reagire mappatura interna di eventi, che provoca il mio clic sull'elemento per diventare un non-op. Ma ancora una volta, questa è solo una supposizione completa.

Qualcuno ha qualche idea al riguardo? Preferirei non dover associare manualmente un listener di eventi in componentDidMount per ciascuno dei miei componenti che utilizzano i comandi MDL (come ho fatto nell'esempio JSBin fornito), ma questa è la soluzione che sto per fare ora.

Inoltre, poiché non ero sicuro che si trattasse di un bug specifico MDL, ho scelto di pubblicare questa domanda qui invece che sulla loro pagina issues. Se qualcuno pensa che dovrei postarlo anche lì, fammi sapere, e posso farlo.

Grazie!

Answer 1

Ho affrontato anche questo stesso problema. Stavo cercando di acquisire i clic sugli eventi su un mdl-menu__item. E tu hai ragione nel fatto che il sistema sintetico degli eventi di React si sta scontrando. Quello che succede è che se un evento accade all'interno del tuo componente React, , il tuo componente sarà l'ultimo a ricevere l'evento. Il mio lavoro attorno all'evento di elusione reagisce e utilizza un componente reattivo che aiuta ad allegare eventi nativi react-native-listener.

La mia soluzione era per il menu mdl ma sono sicuro che si applica anche al suggerimento.

Answer 2

Un po 'tardi, ma

componentHandler.upgradeAllRegistered(); 

viene caricato in modo dinamico elementi di lavoro.

Nota: se si sposta l'elemento di destinazione tramite la posizione CSS, la descrizione non viene automaticamente visualizzata nella nuova posizione, sarà necessario identificarla e posizionarla anch'essa.