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

Question

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

你能帮助我吗？

Answer 1

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

因此，我们假设您需要允许用户不要搜索 a 中的现有值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（不要将其与 Redux 或 MobX 混淆）。this.titles也被添加到选项中。通过这种方法，您不需要输入或开关来显示/隐藏输入。希望能帮助到你。