antd form 封装可搜索可输入select

import React, {Component} from "react";
import {Select} from "antd";

class AddSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: null,
    };
  }

  render() {
    const {selectedValue} = this.state;
    const {options, placeholder, notFoundContent} = this.props;

    return (
      <Select
        showSearch
        placeholder={placeholder}
        notFoundContent={<span style={{color: "red"}}>{notFoundContent}</span>}
        optionFilterProp="children"
        filterOption={(input, option) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        allowClear
        value={this.props.value}
        onChange={(val) => {
          this.setState(() => ({selectedValue: val}))
          this.props.onChange(val)
        }}
        onSearch={(val) => {
          this.setState(() => ({selectedValue: val}))
        }}
        onBlur={() => {
          const a = selectedValue
          this.setState(() => ({selectedValue: a}))
          this.props.onChange(a)
        }}
      >
        {options?.map(item => (
          <Select.Option
            key={item.value}
            value={item.value}
          >{item.label}
          </Select.Option>
        ))}
      </Select>
    )
  }
}

export default AddSelect;

使用示例

  <Row>
              <FormItem label="分类">
                {getFieldDecorator('categoryId', {
                  rules: [
                    {
                      required: true,
                      message: '请选择分类',
                    },
                  ],
                })(
                  <AddSelect
                    placeholder="请选择分类"
                    notFoundContent="暂无此分类，提交表单后将自动创建该分类"
                    options={categoryOption}
                  />
                )}
              </FormItem>
            </Row>