如何在自动完成中显示多个默认值?

时间:2021-04-22 11:40:13

标签: reactjs material-ui

material-ui Autocomplete defaultValue 属性无法显示数组的多个值。如何显示默认值?

数组就像 , test: ["demo", "one"] 被传递给默认值 prop 此数组在 useEffect 期间初始化。

  const [List, setList] = useState([]);
  const [x, xs] = useState([]);

  useEffect(() => {
    if (exam.sign_doc) {
      xs(exam.sign_doc);
    }
    setList([exam.basic_info.doc, exam.basic_info.ref]);
  }, []);

<Autocomplete
        className={classes.formControl}
        freeSolo
        multiple
        filterSelectedOptions
        id="doc_autoComplete"
        disableCloseOnSelect
        options={List}
        defaultValue={x}
        onChange={action((event, value) => state.people = value)}
        renderInput={(params) => (
          // eslint-disable-next-line react/jsx-props-no-spreading
          <TextField {...params} multiline variant="outlined" label="Select" placeholder="Select or Enter to save a Name" margin="normal" />
        )}
        renderOption={(option, { selected }) => (
          <>
            <Checkbox
              icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
              checkedIcon={<CheckBoxIcon fontSize="small" />}
              style={{ marginRight: 8 }}
              checked={selected}
            />
            {option}
          </>
        )}
        renderTags={(value, getTagProps) => value.map((option, index) => (
          // eslint-disable-next-line react/jsx-props-no-spreading
          <Chip variant="outlined" label={option} {...getTagProps({ index })} />
        ))}
      />
    </FormControl>

0 个答案:

没有答案