提交表单时从 Material-UI Autocomplete 清除多个芯片

Question

我有一个包含多个 React Material Autocomplete（带芯片的多选）组件的表单。当我提交表单时，每个自动完成的状态都会正确清除，但在视觉上仍然显示筹码。我不知道如何删除它们。

我也找不到关于此的任何其他线程讨论。

编辑：

代码在这里，与 Material-UI 示例几乎没有变化：

<Autocomplete
    multiple
    id="tags-standard"
    options={top100Languages.map((option) => option.name)}
    onChange={(event, value) => setCategory(value)}
    freeSolo
    renderTags={(value, getTagProps) =>
      value.map((option, index) => (
        <Chip
          variant="outlined"
          label={option}
          {...getTagProps({ index })}
        />
      ))
    }
    renderInput={(params) => <TextField {...params} placeholder={label} />}
  />

表格是：

<EntryForm onSubmit={onSubmit}>
  <h4>Add Entry</h4>
  <InputSelector setCategory={setThink} label={i18n("questionThink")} />
  <AddEntryLocation setLocation={setLocation} setGeolocation={setGeolocation} />
  <button>Add</button>
</EntryForm>

Answer 1

您想从外部操纵您的组件值，这称为受控组件。 Here 就是你的榜样。