大佬教程收集整理的这篇文章主要介绍了如何在 React 组件中获取焦点元素并更改状态？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的目的是在焦点元素发生变化时更新“isEditorFocused”状态，如果 div 包含焦点元素，则将 true 传递给编辑器组件。
然而，代码并没有按照我的意图工作......它只更新前两次状态。
这是我的代码。实际上不是确切的代码，但它是我问题的核心部分。如有错别字，请无视。我在我的真实代码文件中检查了所有内容。
export default AddArticle = () => {
const [isEditorFocused,setIsEditorFocused] = React.useState(false);
const editorRef = React.useRef(null);
React.useEffect(() => {
if(editorRef.current !== null) {
if(editorRef.current.contains(document.activeElement)
setIsEditorFocused(true);
else
setIsEditorFocused(false);
}
},[document.activeElement]}
return (
<div ref={editorRef} tabIndex="0">
<Editor isEditorFocused={isEditorFocuseD}></Editor>
<fileUploader {some props}/>
</div>
)
}
不要完全更改您的代码，但您不能只使用 onFocus 和 onBlur 处理程序吗？
例如：
const AddArticle = () => {
const [isEditorFocused,setIsEditorFocused] = React.useState(false);
return (
<div
onFocus={() => {
setIsEditorFocused(true);
}}
onBlur={() => {
setIsEditorFocused(false);
}}
tabIndex="0"
>
<Editor isEditorFocused={isEditorFocuseD}></Editor>
</div>
);
};
工作codepen
正如 T J 雄辩地提到的那样，您的问题在于 document.activeElement
关于 React 当前对 onFocus 与 onFocusIn 的支持的注意事项：
React 使用 onFocus 和 onBlur 而不是 onFocusIn 和 onFocusOut。所有 React 事件都标准化为气泡，因此 React 不需要/支持 onFocusIn 和 onFocusOut。
来源：React Github
,主要问题是：[document.activeElement].useEffect 依赖数组仅适用于 React 状态，而 document.activeElement 不是 React 状态。
您可以尝试在您的 <div> 上使用 focusin 事件侦听器，如果它接收到该事件，则表示它本身或其中的某些内容获得了焦点，因为只要没有 focusin 事件就会冒泡inside 明确阻止了此事件的传播。
试试这个方法。
const AddArticle = () => {
const [isEditorFocused,setIsEditorFocused] = React.useState(false);
const handleBlur = (E) => {
setIsEditorFocused(false)
};
handleFocus = (){
const currentTarget = e.currentTarget;
if (!currentTarget.contains(document.activeElement)) {
setIsEditorFocused(true);
}
}
return (
<div onBlur={handleBlur} onFocus={handleFocus}>
<Editor isEditorFocused={isEditorFocuseD}></Editor>
</div>
);
};
以上是大佬教程为你收集整理的如何在 React 组件中获取焦点元素并更改状态？全部内容，希望文章能够帮你解决如何在 React 组件中获取焦点元素并更改状态？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。