Handle Reaktion auf Ereignisdelegierung mit stopPropagation()

Question

Ich habe ein Projekt in React, das auf jeder Website platziert werden kann. Die Idee ist, dass ich eine JavaScript-Datei hosten, Leute ein Div mit einer bestimmten ID platzieren und React in diesem Div rendert.

Bisher funktioniert das, außer Click-Events. Diese Werte sind handled at the top level. Das ist alles gut, aber eine der Seiten, wo die App platziert werden sollte, hat implementiert für ein Off-Canvas-Menü. Aus diesem Grund funktionieren die Ereignisse nicht ordnungsgemäß.

Ich habe versucht, alle Ereignisse an der Wurzel-Element zu kontrollieren, und den Versand manuell:

this.refs.wrapper.addEventListener('click', (event) => { 
    console.log(event); 
    console.log(event.type); 
    const evt = event || window.event; 
    evt.preventDefault(); 
    evt.stopImmediatePropagation(); 
    if (evt.stopPropagation) evt.stopPropagation(); 
    if (evt.cancelBubble !== null) evt.cancelBubble = true; 
    document.dispatchEvent(event); 
}); 

Diese nicht funktioniert, da das Ereignis bereits versandt wird:

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.

Was wäre der richtige Weg, um dieses Problem zu beheben? Nicht die synthetischen Ereignisse von React zu verwenden scheint nicht der richtige Weg für mich zu sein.

Answer 1

Argument 'Event h'as bereits versandt worden. Sie sollten ein neues Ereignisobjekt mit einem alten Ereignis klonen.

var newevent = new event.constructor(event.type, event) 

Answer 2

Das ist noch keine Lösung. Reagieren Sie, wie Sie sagen, auf Ereignisse im Stammverzeichnis des DOM und filtern Sie Ereignisse, wenn deren event.target nicht innerhalb des montierten Knotenpunkts reagiert.
Sie können versuchen:
1. Redispatch neues Ereignis in der Komponente, aber es wird auch an externen Handler gestoppt werden.
2. Versenden eines neuen Ereignisses außerhalb der Reract-Komponente, höher (am nächsten zu BODY), dann Knoten mit stopPropagation-Callback. Aber event.target wird auf Knoten zeigen, die nicht in Reacts Komponente und Sie können es nicht ändern, da es readonly ist.
Vielleicht in den nächsten Versionen werden sie es beheben.

Answer 3

Aber Sie können auf Ereignisse im Dokument hören, nicht?

Sagen wir, Ihre Root-Komponente für die gesamte App heißt app. Dann können Sie innerhalb componentDidMount haben:

// when the main App component mounts - we'll add the event handlers .. 
componentDidMount() { 

    var appComponent = this; 

    document.addEventListener('click', function(e) { 

     var clickedElement = e.target; 

     // Do something with the clickedElement - by ID or class .. 
     // You'll have reference to the top level component in `appComponent` .. 

    }); 
};