Come posso inviare manualmente eventi di sintesi React?

Question

Sto lavorando per aggiungere componenti React a un progetto esistente con un sacco di codice legacy.

Un problema che sto incontrando è che React allega i suoi gestori per la delega degli eventi sull'oggetto document. Sfortunatamente per me, gran parte del nostro codice legacy intercetta gli eventi di clic e chiama event.stopPropagation prima che raggiungano l'oggetto documento (ad esempio per gestire i menu a discesa e le modali degli strumenti che si chiudono quando si fa clic all'esterno di essi).

Quando l'evento click viene intercettato, l'evento non viene propagato al gestore eventi di livello documento di React e l'evento non viene delegato ai miei componenti React (anche se gli elementi DOM effettivi per i componenti si trovano sopra intercettare l'elemento nel DOM e ricevere prima gli eventi effettivi non delegati).

Quindi ... domanda: esiste un modo per attivare manualmente l'evento sintetico React per un determinato evento senza che venga colpito il gestore di eventi a livello di documento di React? O c'è un modo per spostare o duplicare quel singolo gestore di eventi da qualche altra parte?

Come ripiego, sto considerando di utilizzare jQuery per aggiungere eventi dopo il montaggio del componente React, ma preferirei non farlo se possibile.

Answer 1

Dipende da cosa stai facendo, gli eventi in reazione dovrebbero generare un cambiamento nello stato interno del componente o qualcosa del genere (magari cambiamenti in uno stato globale se stai usando un'architettura simile a quella di un flusso). Quindi, con questo in mente, puoi creare un wrapper, rendere i componenti e attivare quel wrapper con quello che vuoi fare.

Ad esempio:

function renderComponent(props={}) { 
    ReactDOM.render(<Component {...props} />, document.getElementById('elementId')); 
} 

Diciamo che avere un pulsante che, dopo aver cliccato, dovrebbe creare un cambiamento sul testo di un componente reagire.

$('button#my-button').on('click', function(event){ 
    event.preventDefault(); 
    renderComponent({text: 'Hello world!'}); 
}); 

Così, il componente di risposta riceverà la proprietà di testo, e lì si può fare il cambio di testo. Questo è solo un esempio veloce e sporco di ciò che puoi fare.