快捷導航

基于antd的autocomplete的二次封裝查詢示例

更新時間：2023年08月24日 11:23:50 作者：點墨

這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

正文

基于antd的autocomplete進行二次封裝，用于后端實時查詢數(shù)據(jù)

autocomplete.js

import React, { useEffect, useState } from "react";
import { useDebounceFn } from "ahooks";
import { AutoComplete as AntdAutoComplete } from "antd";
import lodash from "lodash";
import protoTypes from "prop-types";
function EndAutoComplete(props) {
    const { value: propValue, onChange: propOnChange, defaultOptionsMap, fetchData, ...otherProps } = props;
    const [value, setValue] = useState(propValue);
    const [options, setOptions] = useState();
    const [optionsMap, setOptionsMap] = useState({});
    //初始化value
    useEffect(() => {
        if (defaultOptionsMap) {
            setValue(defaultOptionsMap[propValue]);
        }
    }, [defaultOptionsMap])
    //更新options map
    useEffect(() => {
        if (lodash.isArray(options)) {
            let newOptionMap = {};
            options.forEach(item => {
                const { value, label } = item;
                newOptionMap[label] = value;
            })
            setOptionsMap(newOptionMap);
        }
    }, [options])
    const _handleSearch = value => {
        const promise = fetchData(value);
        if (promise && promise.then) {
            promise.then(data => {
                setOptions(data);
            }).catch(e => {
                console.error("AutoComplete Fetch Data Error", e)
                setOptions([]);
            })
        }
    }
    const { run: handleSearch } = useDebounceFn(_handleSearch, { wait: 500 });//防抖
    const onSearch = value => {
        if (!value.trim()) {
            setOptions([]);
            return;
        }
        if (lodash.isFunction(fetchData)) {
            handleSearch(value);
        }
    }
    const onChange = (value) => {
        if (lodash.isFunction(propOnChange)) {
            propOnChange(optionsMap[value] || -999999);
        }
        setValue(value);
    }
    const onSelect = (value, option) => {
        if (lodash.isFunction(propOnChange)) {
            propOnChange(value);
        }
        setValue(option.label);
    }
    return (
        <AntdAutoComplete
            options={options}
            onSearch={onSearch}
            onSelect={onSelect}
            onChange={onChange}
            value={value}
            {...otherProps}
        >
        </AntdAutoComplete>
    )
}
EndAutoComplete.prototype = {
    fetchData: protoTypes.func,//異步獲取數(shù)據(jù)
    defaultOptionsMap: protoTypes.object,//用于鍵盤精靈初始化賦值
}
export default EndAutoComplete;

以上就是基于antd的autocomplete的二次封裝查詢鍵盤示例的詳細內(nèi)容，更多關(guān)于antd autocomplete的二次封裝的資料請關(guān)注腳本之家其它相關(guān)文章！