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用于条件地渲染子组件。