antd Select组件单选框自定义输入和可选择输入功能实现

函数组件中的用法 

  const [searchValue, setSearchValue] = useState('');
            const onSearch = curentValue => {
            if (curentValue) {
              setSearchValue(String(curentValue)?.trim());
            }
          };
              const renderSearchValue = () => {
                const valueData = searchValue.replaceAll(',', ' ').split(' ');
                return valueData.map(v => (
                  <Option key={v} value={v} label={v}>
                    {v}
                  </Option>
                ));
              };
            <Select
                allowClear
                showSearch
                onBlur={()=> setSearchValue('')}
                optionFilterProp="children"
                onSearch={onSearch}
                showArrow={false}
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {searchValue !== '' && renderSearchValue()}
                <Option value="三上悠雅">三上悠雅</Option>
                <Option value="深田咏美">深田咏美</Option>
                <Option value="相泽蓝">相泽蓝</Option>
                <Option value="河北采花">河北采花</Option>
              </Select>

尚存问题:自定义输入时不能过滤掉选择框里面已有的选择项,会生成重复项,例如输入'三上',会生成新的选项'三上'而不是自定义的不显示(我猜会用到节流一类的)

抛砖引玉,有解决方法和更好的方法欢迎大伙留言!