reactjs - Autocomplete Material-UI 中如何默认打开下拉列表？

Question

在自动完成表单中，显示国家数据及其相关代码。当输入文本获得焦点时，将填充下拉列表。我的意图是在没有焦点要求的情况下预加载数据数组。例子见代码

const [newValue, setNewValue] = useState(null);
const [textToggle, textToggleState] = useState(false);

render(
         <div
          style={{ cursor: "pointer" }}
          onClick={() => {
            textToggleState(!textToggle);
          }}
        >
          <h5>+{newValue == null ? "91" : newValue.calling_code}</h5>
        </div>
        {textToggle ? (
          <Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />
        ) : (
          ""
        )}
  </div>
)

在这里您可以看到数据显示在输入文本焦点上。什么可能是最好的解决方案预加载数据？

CodeSandbox 链接:https://codesandbox.io/s/how-to-add-only-single-value-from-autocomplete-in-material-ui-forked-tu218

Answer 1

只需控制 Autocomplete 的 open 状态并将默认值设置为 true:

export default function ComboBox() {
  // default value to true to open at first render
  const [open, setOpen] = useState(true);

  return (
    <Autocomplete
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      options={top100Films}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

现场演示