event.stopPropagation ne parvient pas à arrêter le bouillonnement vers le parent

Question

J'ai des événements onContextMenu attachés à un composant parent et à un composant enfant. Ce sont tous deux des événements synthétiques react, mais event.stopPropagation ne parvient pas à les arrêter.

LES DEUX SONT DES ÉVÉNEMENTS DE RÉACTION

Edit : J'ai eu une révélation, est-ce parce que j'hydrate à l'intérieur d'un contenu éditable div ? et react ne sait pas que les deux composants sont enfant et parent comme react ignore le contenu à l'intérieur des divs éditables. y a-t-il un moyen de faire comprendre cela à react ?

ParentComponent

 const CMSCheckBox = (props, ref) => {
      openMenu=()=>{
        alert("Parent");
    }
   //hydrating components based on props
    useEffect(() => {
    if (props.objValue && props.objValue.SubElements) {
       props.objValue.SubElements.map(SubElement => {
           let strDivId = SubElement.DivId ? SubElement.DivId : "element_" + SubElement.iElementId;
           if (!document.getElementById(strDivId)) {
               let objSavedSel = ApplicationState.GetProperty("objActiveSelection");
               if (objSavedSel && objSavedSel != null) {
                   let divElement;
                   divElement = document.createElement("span");
                   ApplicationState.SetProperty("objActiveDiv",
                    {
                       strDivId: strDivId
                   });
                   divElement.id = strDivId;
                   divElement.setAttribute('type', SubElement.iElementType.toLowerCase() + 'div');
                   let range = document.createRange();
                   range.setStart(document.getElementById(objSavedSel.divId),
              0);
                   range.collapse(true);
                   var nodeStack = [document.getElementById(objSavedSel.divId)
              ], node, foundStart = false, stop = false, charIndex = 0;
                   while (!stop && (node = nodeStack.pop())) {
                       if (node.nodeType == 3) {
                           var nextCharIndex = charIndex + node.length;
                           if (!foundStart && objSavedSel.intStart >= charIndex && objSavedSel.intStart <= nextCharIndex) {
                               range.setStart(node, objSavedSel.intStart - charIndex);
                               foundStart = true;
                  }
                           if (foundStart && objSavedSel.intEnd >= charIndex && objSavedSel.intEnd <= nextCharIndex) {
                               range.setEnd(node, objSavedSel.intEnd - charIndex);
                               stop = true;
                  }
                           charIndex = nextCharIndex;
                } else {
                           var i = node.childNodes.length;
                           while (i--) {
                               nodeStack.push(node.childNodes[i
                    ]);
                  }
                }
              }
                   range.deleteContents();

                   range.insertNode(divElement); //insert div to hydrate
            }
          }

           let Element = UndoRedo(ElementController.getComponent(SubElement.iElementType.toLowerCase()));
           ReactDom.hydrate(<Provider store={store
          } ><Element ElementJson={SubElement
          } PageId={props.PageId
          } Mode={props.Mode
          } /></Provider>, document.getElementById(strDivId));
           // setTimeout(() => {
          //     onContentChange();
          // }, 100);
        })
      }
    return () => {
       divRef.current.removeEventListener("blur", onContentChange_Callbck);
       divRef.current.removeEventListener("mousedown", onMouseDown_Callbck);
      }
    },
    [state, props
    ])
     retrun (<div onContextMenu={} contenteditable="true"></div>)
    }

Les composants enfants sont hydratés dans la division modifiable par le contenu du composant parent en fonction de la position du clic.

const Child =(props,ref) =>{
  const openmenu=(e)=>{
   e.stopPropagation(); //doesnt work
    alert("child");
  }
 return (<div onContextMenu={openmenu}>Test</div>);
}

les deux événements du menu contextuel sont appelés

Answer 1

e.nativeEvent.stopImmediatePropagation();

SyntheticEvent

Answer 2

Le problème est le suivant : comme mon div est éditable, react ne sait pas qu'il s'agit d'un élément parent et d'un élément enfant et ne fait donc rien lorsque stopPropagation est appelé.

La solution que j'ai trouvée, bien que désordonnée, a été d'ajouter le composant enfant en tant que réf. puis attachez le gestionnaire d'événement de react en utilisant le addEventListener de javascript. comme l'événement n'est plus synthétique et n'est pas géré par react, l'événement ne remonte plus jusqu'au parent.