antd实现通过select搜索下拉,如果无搜索条件的下拉,那么回车把刚刚输入的内容添加成下拉选项

antd实现通过select搜索下拉,如果无搜索条件的下拉,那么回车把刚刚输入的内容添加成下拉选项

背景:项目里出现搜索下拉,这个很常见,现在需求时,当搜索时,输入了查询内容,没有下拉 那么回车 把输入的内容添加成搜索条件
这个功能和antd4里面提供的分词相似,如下图,但是这个分词只能支持多选模式可用,咱们想实现下单选也可以实现的

实现思路

选用antd提供的showSearch实现搜索,然后通过获取输入内容,并在回车时添加到下拉数组里面

实现效果

效果图 最开始的情况

输入查询内容回车后的效果

实现代码

import React, { useEffect, useState } from "react"
import { Form, Select } from 'antd';
import { deepCopy } from '../untils/until'
const { Option } = Select;

const Demo = () => {
    let [selectList, setSelectList] = useState([])
    useEffect(() => {
        let list = [{ id: '01', value: '图书音像' }, { id: '02', value: '酒水饮料' }, { id: '03', value: '测试' }]
        setSelectList(list)
    }, []);

    // 键盘enter确定时的方法
    const handleValue = (e) => {
        if (e.keyCode === 13) { //当回车点击回车键执行下面方法
            console.log('value:', e.target.value);
            const newItem = e.target.value
            let newId = selectList.length + 1
            if (newItem.length > 0) {
                let newArr = deepCopy(selectList) //深拷贝
                console.log('源数组', selectList)
                // console.log('newArr', newArr)
                newArr.push({
                    id: newId,
                    value: newItem
                })
                console.log('改变后的数组', newArr)
                setSelectList(newArr)
            }
        }
    };

    return (
        <Form>
            <Form.Item
                label="下拉框"
                name="searchId"
            >
                <Select style={{ width: 200 }} placeholder="下拉框"
                    showSearch
                    onInputKeyDown={handleValue}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {
                        selectList && selectList.length > 0 ? selectList.map((item, index) => {
                            return <Option value={item.id} key={item.id} >{item.value}</Option>
                        }) : null
                    }
                </Select>
            </Form.Item>
        </Form>
    );
};

export default Demo;

深拷贝的方法

// 深拷贝
export function deepCopy(source) {
    if (!isObject(source)) return source; //如果不是对象的话直接返回
    let target = Array.isArray(source) ? [] : {} //数组兼容
    for (var k in source) {
        if (source.hasOwnProperty(k)) {
            if (typeof source[k] === 'object') {
                target[k] = deepCopy(source[k])
            } else {
                target[k] = source[k]
            }
        }
    }
    return target
}

function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}

深拷贝相关内容 参考这篇文章 https://www.cnblogs.com/dobeco/p/11295316.html