隐藏 Material-UI 自动完成弹出窗口，直到键入文本

Question

我已经Autocomplete实现了一个有效的 Material-UI，但是目前当您单击选择一个项目时，除了文本搜索之外，它还会显示所有项目的可单击下拉列表。

我希望这样在先输入某些内容之前不会显示下拉选项。

<Autocomplete
  id="combo-box"
  options={listofitems}
  value={itemid}
  onChange={viewitemlist}
  renderInput={(params) => <TextField {...params}
    label="Item Id"
    variant="outlined" />}
/>

Answer 1

您可以控制open状态并告诉Autocomplete仅在用户输入内容后才打开弹出窗口。

const [open, setOpen] = React.useState(false);

return (
  <Autocomplete
    open={open}
    onInputChange={(_, value) => {
      if (value.length === 0) {
        if (open) setOpen(false);
      } else {
        if (!open) setOpen(true);
      }
    }}
    onClose={() => setOpen(false)}
    {...}
  />
);

现场演示