在 React 中检查元素是否获取到焦点
要检查元素是否在 React 中获得焦点:
- 在元素上设置 ref 属性。
- 元素呈现后,检查元素是否是文档中的活动元素。
- 如果是,则该元素被聚焦。
import {useEffect, useRef} from 'react';
export default function App() {
const ref = useRef(null);
// 👇️ check if an element is focused on mount
useEffect(() => {
if (document.activeElement === ref.current) {
console.log('element has focus');
} else {
console.log('element does NOT have focus');
}
}, []);
return (
<div>
<input ref={ref} autoFocus type="text" id="message" name="message" />
</div>
);
}
代码示例展示了如何检查元素是否获得焦点。
const ref = useRef(null);
useRef() 钩子可以传递一个初始值作为参数。 该钩子返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数。
请注意
,我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的输入元素。
useEffect(() => {
if (document.activeElement === ref.current) {
console.log('element has focus');
} else {
console.log('element does NOT have focus');
}
}, []);
当我们将 ref prop 传递给元素时,例如 <input ref={myRef} />
,React将ref对象的 .current 属性设置为对应的DOM节点。
我们将一个空的 dependencies
数组传递给 useEffect
钩子,因此它只会在组件安装时运行。
我们使用 useEffect
钩子是因为我们要确保已在元素上设置 ref 并且已呈现该元素。
document.activeElement
属性返回当前具有焦点的元素。
如果没有焦点元素,document.activeElement 属性将在大多数浏览器中返回 body 元素,但它也可能返回 null,具体取决于浏览器的实现。
我们只需检查 document.activeElement
是否等于 ref.current
,如果表达式返回 true,则该元素具有焦点。
使用 onFocus 和 onBlur 检查元素是否聚焦
这是一个三步过程:
- 在元素上设置
onFocus
和onBlur
属性。 - 每次
onFocus
事件运行时,将isFocused
状态变量设置为 true。 - 每次运行
onBlur
事件时,将isFocused
状态变量设置为 false。
import {useEffect, useRef, useState} from 'react';
export default function App() {
const [isFocused, setIsFocused] = useState(false);
const ref = useRef(null);
useEffect(() => {
console.log('isFocused: ', isFocused);
}, [isFocused]);
return (
<div>
<input
ref={ref}
type="text"
id="message"
name="message"
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
/>
<h2>jiyik.com</h2>
</div>
);
}
我们在元素上设置 onFocus
和 onBlur
属性来检查它是否有焦点。
每次元素获得焦点时,onFocus
事件都会运行,我们将 isFocused
状态变量设置为 true。
当元素失去焦点时,onBlur
事件运行,我们将状态变量设置为 false。
如果我们需要跟踪对 isFocused
状态变量的更改,则可以使用 useEffect
钩子。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。