[JavaScript知识库]react ant protable自定义搜索下拉框

1、背景

select选择框很常见，这里实现 react ant protable实现自定义搜索下拉框

2、coding

    const [selectEnum, setSelectEnum] = useState({});
    
    const asyncFetch = () => {
        fetch('https://localhost/api/search_list')
            .then((response) => response.json())
            .then((json) => setSelectEnum(json.data))
            .catch((error) => {
                console.log('fetch data failed', error)
            });
    };
    
    // 页面刷新，自动发一次请求
    useEffect(() => {
        asyncFetch()
    }, []);
    
    // 防抖搜索设备
    const handleSearch = debounce((val)=> {
        const dispatch = async (params) => {
            console.log("params=", params)
            const data = await post("https://localhost/api/search_list", {
                body: params
            })

            if (data) {
                setSelectEnum(data)
            }
            return {
                data: Array.from(data),
                success: true,
            }
        }

        dispatch({
            search_key_worlds: val
        }).then()
        
    }, 1000)   
    
    const columns = [
        {
            title: "bookName",
            dataIndex: "bookName",
            hiddenInTable: true,
            initialValue: "Nginx大全",
            renderFormItem: () =>{
                // let list = [{"id": 0, "name": "Nginx大全"}, {"id": 1, "name": "Java从入门到精通"}]
                let list = Array.from(selectEnum);
                const options = list.map(item => <option key={item.id}>{item.name}</option>);
                return (
                    <Select
                        key="searchSelcet"
                        showSearch
                        placeholder="请输入关键字搜索"
                        filterOption={false}
                        onSearch={handleSearch}
                    >   {
                        <>
                        <option key="" value="">全部</option>
                        </>
                    }
                        {options}
                    </Select>
                )
            }
        }
    ]