如何使用ant design在select选项中添加输入字段并做出反应答案

【问题标题】：How to add the input field inside the select option using ant design and react如何使用ant design在select选项中添加输入字段并做出反应
【发布时间】：2018-07-11 10:48:26
【问题描述】：

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

这是我的选择选项代码

<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函数是

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

你能帮帮我吗？

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

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

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

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

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

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

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

您可能能够从 Ant Design Pro 组件中重新设计某些东西，或者想出一个解决方案，其中：

选择“创建”时，您将选择输入输入
当输入提交/模糊更新选项列表时，再次切换选择/输入并将值提交到后端。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

您实际上不需要这样做。你需要做的就是使用组件state和ant design为select提供的两个简单的回调函数。

因此，假设您需要允许用户不要同时搜索 Select 中的现有值，但如果它不存在，他们可以选择一个新值。所以这就是我要做的：

内部 render() 方法：

<Select
    showSearch
    value={this.title}
    filterOption={true}
    onSearch={this.handleSearch}
    onFocus={this.handleFocus}
    style={{ width: "100%" }}>
    {this.titles.map((title) => (
      <Select.Option key={title}>{title}</Select.Option>
    ))}
</Select>

this.titles = ["something", "else"].

然后在this.handleSearch和this.handleFocus里面我会写：

protected handleSearch = (value: string) => {
    this.setState({ titles: value && value !== "" ? [...this.titles, value] : fileTitles });
};

protected handleFocus = () => {
    this.setState({ this.titles });
};

我们所做的基本上是在用户打开选择器，一旦用户搜索将添加到选项的任何内容。使用这种方法，您不需要输入或开关来显示/隐藏输入。希望对您有所帮助。

【讨论】：

【解决方案3】：

您可以使用其他模式来输入附加值。

检查这个：https://codesandbox.io/s/antdselectaddoption-7fov7

【讨论】：