使 react-select 下拉仅显示可搜索

Question

我正在使用 react-select，它工作正常。但是我想抽动它，所以当我突出显示它时，它不会显示下拉列表，直到我输入内容（可搜索）然后它显示带有匹配选项的下拉列表。

const options = [
 { value: 'chocolate', label: 'Chocolate' },
 { value: 'strawberry', label: 'Strawberry' },
 { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select 
   options={options} 
  />
)

基本上我希望它表现得像一个自动完成功能。我该如何实现？

Answer 1

您可以使用名为 menuIsOpen 的道具控制菜单（下拉菜单），并在输入中有文本时将其设置为 true。要跟踪输入中的文本，您可以使用 onInputChange.

下面是根据输入值进行控制的代码：

const MyComponent = () => {
  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
  return (
    <Select
      options={options}
      onInputChange={(input) => {
        if (input) {
          setMenuIsOpen(true);
        } else {
          setMenuIsOpen(false);
        }
      }}
      menuIsOpen={menuIsOpen}
    />
  );
};

使 react-select 下拉仅显示可搜索

Make react-select drop down display only with searchable

reactjs

react-select