仅使可搜索的反应选择下拉列表显示

如何解决仅使可搜索的反应选择下拉列表显示

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

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

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

基本上，我希望它的行为像自动完成一样。我该如何实现？

解决方法

您可以使用名为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}
    />
  );
};