Tambahkan pendengar acara pada rujukan dalam konteks React

Question

Pembekal konteks React menetapkan ref yang digunakan oleh komponen lain untuk menetapkan pendengar acara kabur. Masalahnya ialah peristiwa kabur tidak memecat pendengar.

Petikan kod untuk penyedia konteks.

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

Matlamatnya adalah untuk melampirkan pendengar pada pemalam Leksikal.

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

Saya telah menjalankan kod dengan pengelogan dan mencuba beberapa penyelesaian/jawapan daripada useRef 和 addEventListener tetapi tiada satu pun daripada mereka yang berfungsi dalam senario di atas. Sebarang cadangan dialu-alukan!

Answer 1

acara kabur tidak menggelegak, tetapi anda boleh menggunakan acara fokus yang berkaitan untuk mengendalikan elemen kanak-kanak yang kehilangan fokus.

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

return () => element.removeEventListener('focusout', blurHandler);