如何在 react-select 中显示突出显示的选项

Question

我正在使用 react-select。但是我不知道如何从列表选项中获取当前突出显示的选项的值。

例如如果用户按下向下键或向上键，我想知道选择了哪个选项。

我没有在文档中找到任何可用的道具。

不是像下面这样的解决方案。

Answer 1

遗憾的是图书馆不提供这样的功能。但是，它会将 [class-prefix]__option--is-focused 应用于聚焦的选项。然后，您可以通过检查纯 Javascript.

中的 classes 更改轻松获得所需的值

This answer 实施 class ClassWatcher 使您能够检查 class 在特定节点上添加或删除，例如：

new ClassWatcher(targetNode, 'your-class', onClassAdd, onClassRemoval)

因此，您可以通过在 select 的 ref 上使用 querySelectorAll 将此观察器添加到 select 的每个选项。第一步是使用一些选项和一些状态初始化组件，例如 isMenuOpen、focusedValue 和 selectedOption:

const OPTIONS = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  const [focusedValue, setFocusedValue] = React.useState("");
  const [selectedOption, setSelectedOption] = React.useState(null);
  const ref = React.useRef(null);

  return (
    <div className="App">
      <p>Focused value: {focusedValue}</p>
      <Select
        ref={ref}
        classNamePrefix="my-select"
        value={selectedOption}
        onChange={setSelectedOption}
        options={OPTIONS}
        isMenuOpen={isMenuOpen}
        onMenuOpen={() => setIsMenuOpen(true)}
        onMenuClose={() => {
          setFocusedValue("");
          setIsMenuOpen(false);
        }}
      />
    </div>
  );
}

现在我们可以在 class my-select__option--is-focused 变化时使用 ClassWatcher 来更新 focusedValue 状态。这是在 ref 不为空且菜单打开时完成的，因此我们可以为此使用 useEffect 挂钩：

  React.useEffect(() => {
    if (ref && isMenuOpen) {
      const menu = ref.current.select.menuListRef;
      const options = menu.querySelectorAll(".my-select__option");

      // add class watcher to each options
      options.forEach((option, index) => {
        new ClassWatcher(
          option,
          "my-select__option--is-focused",
          () => setFocusedValue(OPTIONS[index].value),
          () => {}
        );
      });
    }
  }, [ref, isMenuOpen]);

您可以在此处查看完整示例：

如何在 react-select 中显示突出显示的选项

How show Highlighted options in react-select

select

reactjs

react-select