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逻辑中使用它。

其他示例here。

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用作按钮，以选择并直接在列表上添加项目。我不知道这是否是反模式。

让我知道是否有人采用不同的方法。

谢谢！

在Ant Design and React中选择一个选项后清除“选择组件”

2 个答案: