input只能选择下拉不能输入_antd select组件添加可输入自定义选项的功能

    由于最近的项目需要一个下拉选择框需要支持即可输入自定义选项，也可点击选择。antd select组件不支持自定义输入选项，所以需要对它进行简单的改造。

    实现起来也不麻烦，需要给select组件的onChange，onSearch，onBlur，添加代码。

 组件代码如下：

<FormItem name="os" label="操作系统">  <Select    placeholder="选择或输入一个操作系统"    allowClear    showSearch    style={{ width: 250, height: 32 }}    filterOption={(input, option) =>      option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0    }    onChange={(value) => onChangeSelect(value)}    onSearch={(value) => onSearchSelect(value)}    onBlur={() => onBlurSelect()}  >    <Option value="CentOS7">CentOS 7Option>    <Option value="UOS20">UOS 20Option>    <Option value="KylinOS">Kylin OSOption>    <Option value="Debian8">Debian 8Option>    <Option value="Ubuntu16">Ubuntu 16Option>    <Option value="Windows">WindowsOption>  Select>FormItem>

函数实现如下：

  const [record, setRecord] = useState('');//用来记录输入的选项  const onSearchSelect = (value: any) => {    if (!!value) {      setRecord(value);    }  };  const onBlurSelect = () => {    if (!!record) {      onChangeSelect(record);    }  };  const onChangeSelect = (value: any) => {    form.setFieldsValue({ os: value });  };

看完了点个赞再走！