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

Question

我使用 ant design 创建了 select 选项。但是我需要在 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 组件中重新设计一些东西，或者想出一个解决方案，其中：

when "create" is selected, you toggle the Select for an Input
当输入为 submitted/blurred 时更新选项列表，再次切换 Select/Input 并将值提交到后端。

希望对您有所帮助。

Answer 2

您实际上不需要这样做。您需要做的就是使用组件 state 和 ant design 为 select.

提供的两个简单回调函数

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

Inside render() method:

<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"].

Then Inside this.handleSearchand this.handleFocus I'd write:

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

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

我们基本上要做的是在组件本身的状态中用 Select 填充我们在 Select 中迭代的选项（不要将它与 Redux 或MobX) 当用户打开 selector 并且一旦用户搜索任何也会被添加到选项中的东西。使用这种方法，您不需要输入或切换到 show/hide 输入。希望对你有帮助。

Answer 3

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

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

Answer 4

mamsoudi 的代码抛出错误，所以我采纳了他的想法并制作了我自己的组件，我将与您分享。

import React from 'react';
import {Select} from "antd";

class FieldSelectAndCustomText extends React.Component {
    constructor(props) {
        super(props);
        this.initialTitles = ["something", "else"];
        this.state = {
            titles: this.initialTitles,
            currentValue: null,
        };
    }
    handleSearch = (value) => {
        const titles = this.state.titles;
        for (let i = 0; i < titles.length; i++) {
            const isSearchValueInState = new RegExp(value).test(titles[i]);
            if (!isSearchValueInState) {
                this.setState({
                    titles: [...this.initialTitles, value],
                    currentValue: value
                });
                break;
            }
        }
    };

    handleChange = (value) => {
        this.setState(prev => ({...prev, currentValue: value}));
    }

    render () {
        return (
            <div>
                <Select
                    showSearch
                    value={this.state.currentValue}
                    filterOption={true}
                    onSearch={this.handleSearch}
                    onChange={this.handleChange}
                    onFocus={this.handleFocus}
                    style={{ width: "100%" }}>
                    {this.state.titles.map((title) => (
                        <Select.Option value={title} key={title}>{title}</Select.Option>
                    ))}
                </Select>
            </div>
        );
    }

}

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

How to add the input field inside the select option using ant design and react

javascript

reactjs

antd