Maison  >  Questions et réponses  >  le corps du texte

Ajouter un écouteur d'événement à la référence dans le contexte React

Le fournisseur de contexte React définit un ref qui est utilisé par un autre composant pour définir l'écouteur d'événement de flou. Le problème est que l'événement Blur ne déclenche pas l'auditeur.

Extrait de code pour le fournisseur de contexte.

...
export function useEditorContext(): EditorContextProps {
    return useContext(EditorContext) as EditorContextProps;
}

export default function EditorProvider({ children }: { children: React.ReactNode }) {
    const ref = useRef<HTMLDivElement>(null);
    const historyState = useMemo(createEmptyHistoryState, []);
    const context = { historyState, ref };
    return (
        <EditorContext.Provider value={context}>
            <div ref={ref}>
                {children}
            </div>
        </EditorContext.Provider>
    );
}

Le but est d'attacher un auditeur à un plugin Lexical.

const { historyState, ref } = useEditorContext();

const blurHandler = (event: FocusEvent) => {
    console.log('Blurred');
};

useEffect(() => {
    const element = ref.current;
    if (element) {
        element.addEventListener('blur', blurHandler, false);
    } else return;

    return () => {
        element.removeEventListener('blur', blurHandler);
    };
}, [ref.current]); // eslint-disable-line

J'ai exécuté le code avec journalisation et essayé plusieurs solutions/réponses de useRefaddEventListener mais aucune d'entre elles n'a fonctionné dans le scénario ci-dessus. Toutes les suggestions sont les bienvenues !

P粉765570115P粉765570115287 Il y a quelques jours404

répondre à tous(1)je répondrai

  • P粉668146636

    P粉6681466362024-01-29 00:40:55

    Les événements de flou ne bouillonnent pas, mais vous pouvez utiliser l'événement focusout associé pour gérer les éléments enfants qui perdent leur focus.

    if (element) {
      element.addEventListener('focusout', blurHandler);
    } else return;
    
    return () => element.removeEventListener('focusout', blurHandler);
    

    répondre
    0
  • Annulerrépondre