Attivazione evento sintetico nell'app React

Question

Sto scrivendo un'estensione Chrome per Facebook e desidero attivare a livello di codice la presentazione della bozza di commento focalizzata su un post. Il comportamento predefinito è di inviare quando l'utente preme il tasto Invio, quindi sto tentando di ingannare l'interfaccia utente di Facebook per pensare che l'utente lo abbia fatto.

Facebook utilizza React e un contenteditable div per i moduli di commento.

Ecco una serie di cose che ho provato:

1) jQuery evento scatenante $('<the contenteditable div>').trigger($.Event('keydown', {which: 13}))

• Ho provato questo sia l'ambiente di contenuti-script e l'ambiente pagina reale (tramite sia uno script iniettato che risponde a postMessage e la console di Chrome)
• Ho anche provato ad attivare l'evento su document, da ogni contesto.
• Nulla sembra accadere.

2) Stessa cosa, ma con l'attivazione dell'evento di VanillaJS. relevant StackOverflow question

• anche da entrambi gli ambienti
• non succede nulla

3) A questo punto mi sono reso conto che questo è reagire e si utilizza il proprio SyntheticEvents, così ho praticamente copia/incollato il Simulate function from ReactTestUtils che dovrebbe per aiutare i test simulando eventi ed eseguendoli all'interno dell'ambiente della pagina (afferrando i riferimenti agli oggetti required tramite la funzione require10 del frontend di Facebook).

• Inoltre, non funziona. La funzione viene eseguita completamente e senza errori, ma non c'è risposta dall'applicazione.

Ho provato questo principalmente con gli eventi keydown, perché questo ha il maggior numero di listener collegati.

Sono consapevole di queste domande, ma non hanno aiutato la mia comprensione: Force React to fire event through injected JavaScript

Answer 1

Non è chiaro in base alla descrizione o meno questo è un problema, ma SyntheticEvent mi ha causato dolore, prima a causa della fatto che l'oggetto è riutilizzato. C'è una nota nel React docs su questo:

Se si desidera accedere alle proprietà dell'evento in modo asincrono, è necessario chiamare event.persist() sull'evento, che rimuoverà l'evento di sintesi dalla piscina e consentire i riferimenti al evento da conservare con il codice utente.

Se non si utilizza immediatamente l'evento o se si sta tentando di passarlo in un nuovo ambito, sarà necessario farlo persist().