时间戳

首页 > 解决方案 > 如何找到专注的 React 组件？（如 document.activeElement）

javascript - 如何找到专注的 React 组件？（如 document.activeElement）

问题描述

如果您有 500 个组件，每个组件都有一个ref，您将如何找到哪个组件具有用户的焦点？所有带有 a 的组件ref都是可聚焦的元素，例如<input />,<textarea />等。为简单起见，所有这些refs都可以从单个顶级组件访问。

如果你的 React 组件有，这非常简单classNames——但是如果你想找到refa document.activeElement，是否有某种方法可以实现这一点而不必求助于 classNames？

要了解为什么我们没有classNames，我们正在使用JSSvia emotion。className为了这个目的而必须手动分配所有东西是相当荒谬的。我没有想到任何明显的替代方案。

标签： javascriptreactjsfocusreact-dom

解决方案

对于挂钩到本机 DOM 方法以跟踪焦点事件然后返回活动元素的自定义挂钩来说，这可能是一个很好的用例。这将在每次新元素获得焦点时记录活动元素：

const useActiveElement = () => {
  const [active, setActive] = useState(document.activeElement);
  
  const handleFocusIn = (e) => {
    setActive(document.activeElement);
  }
  
  useEffect(() => {
    document.addEventListener('focusin', handleFocusIn)
    return () => {
      document.removeEventListener('focusin', handleFocusIn)
  };
  }, [])
  
  return active;
}

const App = () => {
  const focusedElement = useActiveElement();
  
  useEffect(() => {
     if (focusedElement) {
       focusedElement.value && console.log(focusedElement.value);
     }
    console.log(focusedElement);
  }, [focusedElement])
  
  return (
    <div>
        <input type="text"/>
        <button>Button</button>
    </div>
  )
}

但是，将这个元素与您的 ref 关联起来可能会很棘手，因为您需要保留一组要搜索的 refs，这可能涉及为每个元素提供自己的回调 ref以存储在 Array 或类似的东西中。但是根据元素一旦聚焦后你需要对它做什么，它可能没有必要。例如，我在上面发布的代码将记录输入的值（如果存在）。这将有助于更具体地了解您用于跟踪此数据的用例。

推荐阅读