在Ant Design and React中選擇一個選項后清除“選擇組件”

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

您需要在JSX模板中使用ref="someRef" ，並在onSelect邏輯中使用它。

這里的其他示例。

Answer 2

我只將value屬性設置為null即可解決“問題”。

<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用作按鈕，以選擇並直接在列表上添加項目。 我不知道這是否是反模式。

讓我知道是否有人采用其他方法。

謝謝！