查询键盘精灵，基于antd的autocomplete的二次包

基于antd的autocomplete对后端实时查询数据进行二次封装autocomplete.jsimportReact,{useEffect,useState}from"react";import{useDebounceFn}from"ahooks";import{AutoCompleteasAntdAutoComplete}from"antd";importlodash来自“lodash”；从“prop-types”导入原型；functionEndAutoComplete(props){const{value:propValue,onChange:propOnChange,defaultOptionsMap,fetchData,...otherProps}=props;const[值,setValue]=useState(propValue);const[options,setOptions]=useState();const[optionsMap,setOptionsMap]=useState({});//初始化值useEffect(()=>{if(defaultOptionsMap){setValue(defaultOptionsMap[propValue]);}},[defaultOptionsMap])//更新选项映射useEffect(()=>{if(lodash.isArray(options))){letnewOptionMap={};options.forEach(item=>{const{value,label}=item;newOptionMap[标签]=值；})setOptionsMap(newOptionMap);}},[选项])const_handleSearch=value=>{constpromise=fetchData(value);if(promise&&promise.then){promise.then(data=>{setOptions(data);}).catch(e=>{console.error("AutoCompleteFetchDataError",e)setOptions([]);})}}const{run:handleSearch}=useDebounceFn(_handleSearch,{wait:500});//防抖constonSearch=value=>{if(!value.trim()){setOptions([]);返回;}if(lodash.isFunction(fetchData)){handleSearch(value);}}constonChange=(value)=>{if(lodash.isFunction(propOnChange)){propOnChange(optionsMap[value]||-999999);}设置值（值）；}常量onSelect=(value,option)=>{if(lodash.isFunction(propOnChange)){propOnChange(value);}setValue(option.label);}return()}EndAutoComplete.prototype={fetchData:protoTypes.func,//异步获取数据defaultOptionsMap:protoTypes.object,//用于键盘精灵初始化赋值}exportdefaultEndAutoComplete;