Heim  >  Fragen und Antworten  >  Hauptteil

Fügen Sie einen Ereignis-Listener zur Referenz im React-Kontext hinzu

Der React-Kontextanbieter legt ein ref fest, das von einer anderen Komponente verwendet wird, um den Unschärfe-Ereignis-Listener festzulegen. Das Problem besteht darin, dass das Unschärfeereignis den Listener nicht auslöst.

Codeauszug für Kontextanbieter.

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

Das Ziel besteht darin, einen Listener an ein Lexical-Plugin anzuhängen.

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

Ich habe den Code mit Protokollierung ausgeführt und mehrere Lösungen/Antworten von useRefaddEventListener ausprobiert, aber keine davon hat im obigen Szenario funktioniert. Alle Vorschläge sind willkommen!

P粉765570115P粉765570115287 Tage vor403

Antworte allen(1)Ich werde antworten

  • P粉668146636

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

    blur 事件不会冒泡,但您可以使用相关的 focusout 事件来处理失去焦点的子元素。

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

    Antwort
    0
  • StornierenAntwort