Auslösen eines synthetischen Ereignisses in der React App

9

Ich schreibe eine Chrome-Erweiterung für Facebook und möchte die Einreichung des Entwurfs des fokussierten Kommentars programmgesteuert auf einen Beitrag auslösen. Das Standardverhalten besteht darin, zu senden, wenn der Benutzer die Eingabetaste drückt, also versuche ich, die Facebook-Benutzeroberfläche zu glauben, dass der Benutzer dies getan hat.

Facebook verwendet React und ein contenteditable div für Kommentarformulare.

Hier ist eine Reihe von Dingen, die ich ausprobiert habe:

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

  • Ich habe dies sowohl in der Inhaltsskriptumgebung als auch in der tatsächlichen Seitenumgebung versucht (über ein injiziertes Skript, das auf postMessage und die Chrome-Konsole reagiert)
  • Ich habe auch versucht, das Ereignis in document aus jedem Kontext auszulösen.
  • Nichts scheint zu passieren.

2) Selbe Sache, aber mit VanillaJS Event Triggerung. relevante StackOverflow-Frage

  • auch von beiden Umgebungen
  • Nichts passiert

3) An diesem Punkt habe ich gemerkt, dass dies React ist und es verwendet sein eigenes SyntheticEvents , also kopiere ich im Grunde das Simulate von ReactTestUtils , die beim Testen helfen soll, indem Ereignisse simuliert und innerhalb der Umgebung der Seite ausgeführt werden (Verweis auf% co_de) % Objekte über die Facebook-Frontend required -Funktion).

  • Funktioniert auch nicht. Die Funktion wird vollständig und ohne Fehler ausgeführt, aber es gibt keine Antwort von der Anwendung.

Ich habe dies mit meist require -Ereignissen versucht, weil das die meisten Listener hat.

Ich bin mir dieser Fragen bewusst, aber sie haben meinem Verständnis nicht geholfen: Erzwingen Reagieren, um Ereignis durch injiziertes JavaScript auszulösen

    
Matt Condon 21.08.2015, 04:56
quelle

1 Antwort

2

Es ist unklar, basierend auf Ihrer Beschreibung, ob dies ein Problem ist oder nicht, aber SyntheticEvent hat mir zuvor Schmerzen verursacht, weil das Objekt wiederverwendet wird. Es gibt eine Notiz in der React-Dokumentation dazu:

  

Wenn Sie asynchron auf die Ereigniseigenschaften zugreifen möchten, sollten Sie event.persist() für das Ereignis aufrufen, wodurch das synthetische Ereignis aus dem Pool entfernt wird und Verweise auf das Ereignis vom Benutzercode beibehalten werden.

Wenn Sie das Ereignis nicht sofort verwenden oder wenn Sie versuchen, es in einen neuen Bereich zu übertragen, müssen Sie persist() it.

eingeben     
sighrobot 02.11.2016 23:54
quelle