BFE.devAI解答 - React 代码题
11. useFocus()

请参考如下代码实现：

import { useState, useEffect, useRef } from 'react';function useFocus() {  const [isFocused, setIsFocused] = useState(false);  const ref = useRef(null);  const handleFocus = () => {    setIsFocused(true);  };  const handleBlur = () => {    setIsFocused(false);  };  useEffect(() => {    const node = ref.current;    if (node) {      node.addEventListener('focus', handleFocus);      node.addEventListener('blur', handleBlur);      return () => {        node.removeEventListener('focus', handleFocus);        node.removeEventListener('blur', handleBlur);      };    }  }, [ref]);  return [ref, isFocused];}function App() {  const [ref, isFocused] = useFocus();  return (    <div>      <input ref={ref} />      {isFocused && <p>focused</p>}    </div>  );}

代码中使用了React中的Hooks, useRef()用于获取DOM元素作为组件的引用。useState()用于标记当前组件的焦点状态。useEffect()用于监听节点的"focus"和"blur"事件并设置组件的焦点状态。最后组件导出ref和isFocused，ref作为input的引用传递，isFocused用于条件地渲染子组件。