Снимите флажок Выбрать компонент после выбора параметра в Ant Design и React

Question

Я использую только компонент «Выбор» в Ant Design.Мне нужно выбрать опцию и добавить ее в список, но после выбора опции я бы хотел очистить ввод выбора.

// 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>

Я использую select почти как кнопку для выбора и прямого добавления элемента в список.Я не знаю, является ли это анти-паттерном.

Дайте мне знать, если у кого-то другой подход.

Спасибо!

Answer 2

Вам необходимо использовать ref="someRef" в своем шаблоне JSX и использовать его в своей onSelect логике.

Дополнительные примеры здесь .