查询键盘精灵,基于antd的autocomplete的二次封装
基于antd的autocomplete进行二次封装,用于后端实时查询数据
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,//异步获取数据
defaultOptionsMap: protoTypes.object,//用于键盘精灵初始化赋值
}
export default EndAutoComplete;
推荐阅读
java lambda表达式 回调函数
java使用lambda表达式做回调函数,定义一个interface写一个方法即可(如果一个接口只有一个抽象方法(包括继承的),该接口是一个函数接口,函数接口可以使用lambda表达式实现),lambda表达式函数内部可以获取外...
点墨阅读 120
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 20阅读 1.5k评论 1
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...
wuwhs赞 17阅读 2.4k
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...
九旬赞 13阅读 1.5k
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 16阅读 1.5k评论 2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。