提交表单时，从Material-UI自动完成中清除多个筹码

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是您的示例。