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

Question

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 useRef 和 addEventListener mais aucune d'entre elles n'a fonctionné dans le scénario ci-dessus. Toutes les suggestions sont les bienvenues !

Answer 1

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);