文章图片
【react|antd 封装select输入后自动搜索 显示option 组件】框架自带的 自动搜索 有BUG 用 select 组件 封装
子组件import _ from 'lodash'
import { Select, Empty } from 'antd';
import React, { useState, useEffect } from 'react';
import { PeopleDropList } from '@/services/admin';
const SelectRemoteSearch = (props) => {const { onSelect, requestData = https://www.it610.com/article/{}, placeholder } = props
const { Option } = Select;
const [peopleDropList, setPeopleDropList] = useState([]);
const fetch = (value) => {
PeopleDropList({
QueryClause: value,
...requestData,
}).then(res => {
if (res) {
if (res.ReturnCode == 1001) {
let list = [];
!!res.PeopleDropList && res.PeopleDropList.map(item => {
list.push({
Label: `${item.PersonName} ${item.Label ? '(' + item.Label + ')' : ''}`,
Value: item.Value,
StaffCode: item.StaffCode,
Id: `${item.PersonName} ${item.Label ? '(' + item.Label + ')' : ''}`,
Function: item.Function,
Email: item.Label,
Name: item.PersonName,
Level: item.Level,
});
});
setPeopleDropList(list);
};
};
})
};
const handleChange = (value, option) => {
onSelect && onSelect(value, option);
};
const handleSearch = (value) => {
searchDebounce(value);
};
const searchDebounce = _.debounce(fetch, 500);
// 防抖return (
={true}
filterOption={false}
onChange={handleChange}
onSearch={handleSearch}
style={{ width: '100%' }}
placeholder={placeholder}
defaultActiveFirstOption={false}
notFoundContent={null}
>
{!!peopleDropList && peopleDropList.map(item => {
return ;
})}
);
};
export default SelectRemoteSearch;
父组件
import SelectRemoteSearch from '@/components/SelectRemoteSearch';
const onSelect = (value, option) => {
if (!!option) {
let data = https://www.it610.com/article/option.optiondata;
form.setFieldsValue({
StudentName: data.Name,
Email: data.Email,
Function: data.Function,
Level: data.Level,
});
setStaffCode(data.StaffCode);
} else {
form.setFieldsValue({
StudentName:'',
Email: '',
Function: '',
Level: '',
});
setStaffCode('');
};
};
={'Name'}
onSelect={onSelect}
/>
···推荐阅读
- web前端学习笔记|JavaScript学习笔记——JS基础4
- elementui的使用|elementui中el-tree懒加载数据 默认展开最外层节点
- javaWEb|黑马程序（8、http、tomcat、Servlet）
- 使用Javascript，HTML和CSS创建C＃Windows .NET应用程序
- 如何从同一局域网(LAN)中的计算机或移动设备访问XAMPP的htdocs目录
- 如何使用JavaScript和CSS在浏览器中检测用户是喜欢浅色还是深色模式
- 在Cordova中使用JavaScript创建签名板
- 如何在Cordova中使用javascript将图像从设备转换为base64
- 如何将JSON对象从Java返回到javascript(cordova)