Heim > Fragen und Antworten > Hauptteil
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 useRef
和 addEventListener
ausprobiert, aber keine davon hat im obigen Szenario funktioniert. Alle Vorschläge sind willkommen!
P粉6681466362024-01-29 00:40:55
blur 事件不会冒泡,但您可以使用相关的 focusout 事件来处理失去焦点的子元素。
if (element) { element.addEventListener('focusout', blurHandler); } else return; return () => element.removeEventListener('focusout', blurHandler);