Maison > Questions et réponses > le corps du texte
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 !
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);