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

Question

我有一组使用 react-select package – https://react-select.com/home的反应选择。

我有一个包含三个反应选择的组件——基本上是这样的：

   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 元素。 箭头键应该允许用户从 go 到下一个或上一个 select。 因此，需要以某种方式管理焦点，这意味着要知道当前的焦点是什么。

通常，我会这样做：

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

但是，对于 ref.current react-select 返回一个名为 StateManager 的 object – https://react-select.com/props#statemanager-props

因此， ref.current === document.activeElement总是返回 false。

如何，我可以检查哪个 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>
  );
};

现场演示