javascript - 在 Ant Design 和 React 中选择一个选项后清除 Select 组件

Question

我只使用 Ant Design 的 Select 组件。我需要选择一个选项并将其添加到列表中，但在选择该选项后，我想清除选择输入。

// Receiving these props
const {
  fields,
  onAdd,
  selected,
} = this.props;

在下面的代码中，当用户选择一个选项时，它将调用 onAdd 方法以将所选选项添加到其父项的列表中。

<Select
  showSearch
  placeholder="Select a field"
  onSelect={(value) => {
    const optionSelected = fields.filter(field => field.id === value)[0];
    onAdd(optionSelected);
  }
  optionFilterProp="children"
  filterOption={(input, option) => (
    option.props.children.toLowerCase()
      .indexOf(input.toLowerCase()) >= 0
  )}
>
  {
    fields.map(field => (
      <Option
        key={field.id}
        value={field.id}
        disabled={selected.some(item => item.id === field.id)}
      >
        {field.name}
      </Option>
    ))
  }
</Select>

谢谢!

Answer 1

我解决了我的“问题”，只是将 null 设置为 value 属性。

<Select
  value={null}
  showSearch
  placeholder="Select a field"
  onSelect={(value) => {
    const optionSelected = fields.filter(field => field.id === value)[0];
    onAdd(optionSelected);
  }
  optionFilterProp="children"
  filterOption={(input, option) => (
  option.props.children.toLowerCase()
    .indexOf(input.toLowerCase()) >= 0
  )}
>
  {
    fields.map(field => (
      <Option
        key={field.id}
        value={field.id}
        disabled={selected.some(item => item.id === field.id)}
      >
        {field.name}
      </Option>
    ))
  }
</Select>

我几乎将选择用作按钮，用于选择和直接添加列表中的项目。我不知道这是否是反模式。

如果有人有不同的方法，请告诉我。

谢谢!