检测哪个输入是焦点 React hooks

Question

我正在使用 React Hooks。我想检查哪个输入是重点。我有一个动态生成输入的对象。将选择输入，我想要一个按钮将一个值附加到焦点输入。

Answer 1

（编辑）使用 React Hook 更新为更好的解决方案

我遇到的大多数解决方案都没有考虑表单没有活动元素的情况。因此，我想出了以下钩子来涵盖这个案例。

const useActiveElement = () => {
  const [listenersReady, setListenersReady] = React.useState(false); /** Useful when working with autoFocus */
  const [activeElement, setActiveElement] = React.useState(document.activeElement);

  React.useEffect(() => {
    const onFocus = (event) => setActiveElement(event.target);
    const onBlur = (event) => setActiveElement(null);

    window.addEventListener("focus", onFocus, true);
    window.addEventListener("blur", onBlur, true);

    setListenersReady(true);

    return () => {
      window.removeEventListener("focus", onFocus);
      window.removeEventListener("blur", onBlur);
    };
  }, []);

  return {
    activeElement,
    listenersReady
  };
};

https://codesandbox.io/s/competent-thunder-59u55?file=/src/Form.js

这应该可以让您更轻松地检测哪个表单输入处于活动状态。