代码之家 › 专栏 › 技术社区 › jayanes

如何使用ant design和react在select选项中添加输入字段

antd reactjs javascript

jayanes · 技术社区 · 6 年前

我用ant design创建了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,
  });
}

你能帮助我吗?

3 回复 | 直到 6 年前

Vincro 6 年前

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

选择组件具有 mode 可以使用以下选项更改功能的属性:

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

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

如果您正在查看固定列表,然后希望创建要添加到列表中的新项目:

如果您希望能够向列表中添加新项目,据我所知,这在当前不存在。

您可以从Ant Design Pro组件中重新创建一些内容,或者在以下情况下提出解决方案:

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

我希望这有帮助。

mamsoudi 6 年前

实际上你不需要这么做。您所需要做的就是使用组件 state Ant设计提供了两个简单的回调函数供选择。

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

我们基本上要做的是填充在 选择 具有 this.titles 在组件本身的状态下(不要将其与redux或mobx混淆),当用户打开选择器并搜索将添加到选项中的任何内容时。使用这种方法,您不需要输入或开关来显示/隐藏输入。希望有帮助。

GEORGE TARANTILS 6 年前

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

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