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

Question

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

我想要它，所以在首先输入内容之前不会显示下拉选项。

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

标签： reactjsautocompletematerial-ui

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)}
    {...}
  />
);

现场演示