如何使用蚂蚁设计和反应在选择选项内添加输入字段 [英] How to add the input field inside the select option using ant design and react

问题描述

我使用 ant design 创建了选择选项.但我需要在选择选项中创建可编辑的单元格.

I created select option using ant design .But I need create editable cell inside the select option.

这是我选择的选项代码

<Select
  showSearch
  style={{ width: 400 }}
  placeholder="Select a Bank"
  optionFilterProp="children"
  onChange={this.handleChange.bind(this)}
>
  <option value="1">Bank1</option>
  <option value="2"> Bank2</option>
  <option value="3"> Bank3</option>
</Select> 

和 onChange 函数是

And onChange functions is

handleChange(value) {
  console.log(`selected ${value}`);
  this.setState({
    bank:value,
  });
}

你能帮我吗?

推荐答案

我想问题是这是否是一个可编辑的列表.

I suppose the question is whether or not this is an editable list.

Select 组件有一个 mode 属性，可用于通过以下选项更改功能:

The Select component has a mode prop that can be used to change the functionality with the following options:

'default' | 'multiple' | 'tags' | 'combobox'

使用标签模式将允许您添加和删除项目并在提交表单时生成标记化列表.

Using the tags mode would allow you to add and remove items and generate a tokenized list when the form is submitted.

如果您正在查看固定列表，然后想要创建新项目以添加到列表中:

If you are looking at a fixed list and then wanting to create new items to add to the list:

如果您希望能够向列表中添加新项目，据我所知，目前尚不存在.

If you want to be able to add new items to the list, this doesn't exist currently, as far as I am aware.

您也许可以从 Ant Design Pro 组件中重新设计某些东西，或者想出一个解决方案:

You may be able to refashion something from the Ant Design Pro components, or otherwise come up with a solution where:

1. 选择创建"时，您可以切换输入的选择
2. 当输入被提交/模糊时更新选项列表，再次切换选择/输入并将值提交到后端.

我希望这会有所帮助.

这篇关于如何使用蚂蚁设计和反应在选择选项内添加输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！