Question

我使用ant设计创建了select选项。但是我需要在select选项内创建可编辑单元格。

这是我的选择代码

<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,
  });
}

你能帮我吗？

Answer 1

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

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

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

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

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

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

您可以重新设计Ant Design Pro组件中的某些内容，或者提出以下解决方案：

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

我希望这会有所帮助。

Answer 2

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

因此，假设您需要允许用户不要在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 });
};

我们基本上要做的是在组件本身的状态下在Select中用this.titles填充要迭代的选项（不要将其与Redux或MobX混淆）当用户打开选择器，并且一旦用户搜索也会添加到选项中的任何内容时。使用这种方法，您将不需要输入或开关来显示/隐藏输入。希望对您有所帮助。

Answer 3

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

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

如何使用蚂蚁设计和反应来在选择选项内添加输入字段

3 个答案: