如何在自动完成中设置默认选择项

Question

我正在使用 material-ui 自动完成，我想为其添加一些默认的 selected 选项。

https://codesandbox.io/s/broken-fire-htxtd?file=/src/App.js

如您在示例中所见，我正在使用 startAdornment 渲染预先 selected 的项目。问题是当我尝试 select 另一个项目时，它会自动删除预先 select 的项目。我也无法正确删除它们。

这个想法是默认 selected 保持 selected 直到我删除它们。也可以选择另一个字母而不删除它们。

Answer 1

您可以使用 defaultValue 属性代替装饰。

 <Autocomplete
  multiple
  open={open}
  onOpen={() => {
    setOpen(true);
  }}
  onClose={() => {
    setOpen(false);
  }}
  options={["A", "B", "C", "D", "E"]}
  disableCloseOnSelect
  defaultValue={cities}  //here
  onChange={(e, v) => setCities(v)}
  getOptionLabel={(option) => option}
  renderOption={(option, { selected }) => {
    if (cities.includes(option)) {
      selected = true;
    }
    return (
      <React.Fragment>
        <Checkbox
          icon={icon}
          checkedIcon={checkedIcon}
          style={{ marginRight: 8 }}
          checked={selected}
        />
        {option}
      </React.Fragment>
    );
  }}
  renderInput={(params) => {
    return (
      <TextField
        {...params}
        variant="outlined"
        label="Cities"
        placeholder="Enter cities"
        autoComplete="off"
      />
    );
  }}
/>

如何在自动完成中设置默认选择项

How to set default selected items in Autocomplete

javascript

reactjs

autocomplete

material-ui