使用 react-select 和 react refs 时如何获取 ref.current dom 元素？

Question

我有一组使用 react-select 包的 react selects – https://react-select.com/home.

我有一个包含三个 react-selects 的组件——基本上是这样的：

   import Select from "react-select"

   function SelectGroup(){
     const ref1 = useRef(null);
     const ref2 = useRef(null);
     const ref3 = useRef(null);
   
     return (
       <div>
         <Select ref={ref1} />
         <Select ref={ref2} />
         <Select ref={ref3} />
       </div>
     )
   }

我需要执行一些检查以查看重点内容。我这样做的原因是因为 select 组是一个单独的组件，需要能够允许用户通过键盘以多种方式导航。空格键和回车键应该允许用户将焦点转移到下一个 select 元素。箭头键应允许用户转到下一个或上一个 select。因此，需要以某种方式管理焦点，这意味着知道当前焦点是什么。

通常情况下，我会这样做：

  function isActiveElement(ref){
    return ref?.current === document.activeElement
  }

然而，对于ref.current react-select returns一个对象叫做StateManager – https://react-select.com/props#statemanager-props

所以，ref.current === document.activeElement总是returns错误。

如何，我可以查看哪个 react-select 处于焦点吗？我无法在 react-select 文档中找到关于此的任何信息。也许，我想念它？我已经用其他方法解决了这个问题，但我很好奇是否有一种方法可以用我上面描述的这种“更简单的方法”来解决，这可能是更常见的方法。

Answer 1

您可以收听 focus 和 blur 事件以跟踪当前焦点 Select:

export default function App() {
  const [focus, setFocus] = useState(-1);
  const onBlur = () => setFocus(-1);

  return (
    <div>
      <div>Current focus: {focus}</div>
      <Select
        onFocus={() => setFocus(0)}
        onBlur={onBlur}
        options={colourOptions}
      />
      <Select
        onFocus={() => setFocus(1)}
        onBlur={onBlur}
        options={colourOptions}
      />
      <Select
        onFocus={() => setFocus(2)}
        onBlur={onBlur}
        options={colourOptions}
      />
    </div>
  );
};

使用 react-select 和 react refs 时如何获取 ref.current dom 元素？

How to get the ref.current dom element when using react-select and react refs?

reactjs

react-select

现场演示