admin 管理员组

文章数量: 1086019

I'm using just the Select ponent of Ant Design. I need to select an option and add it to a list, but after selecting the option, I would like to clean the select input.

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

In the code below, when the user select an option, it will call the onAdd method in order to add the selected option to a list in its parent.

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

Thanks!

I'm using just the Select ponent of Ant Design. I need to select an option and add it to a list, but after selecting the option, I would like to clean the select input.

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

In the code below, when the user select an option, it will call the onAdd method in order to add the selected option to a list in its parent.

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

Thanks!

  • javascript
  • reactjs
  • antd
Share Improve this question asked Dec 5, 2018 at 15:07 Italo BorgesItalo Borges 2,5546 gold badges38 silver badges45 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

I solved my "problem" just setting null to the value property.

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

I'm using the select almost as a button, to select and direct add an item on a list. I don't know if this an anti-pattern.

Let me know if anyone has a different approach.

Thanks!

You need to use ref="someRef" in your JSX template and use it in your onSelect logic.

Additional examples here.

本文标签： javascriptClear Select component after an option is selected in Ant Design and ReactStack Overflow

版权声明：本文标题：javascript - Clear Select component after an option is selected in Ant Design and React - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744076225a2529401.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。