import React, { useEffect, useState } from 'react'; import styles from './index.less'; import { Select } from 'antd'; //import { mapListData } from '@/hooks/useMapList'; import { SearchOutlined } from '@ant-design/icons'; import { useModel } from 'umi'; type mapResType = { text: string; value: string; }; const { Option } = Select; type SearchInputProps = { onSearch: (s: string) => void; mapList: API.MapInfo[]; }; const SearchInput: React.FC = ({ onSearch, mapList }) => { const [matchData, setMatchData] = useState([]); const [value, setValue] = useState(); // const { mapList } = useModel('map'); //这是搜索 的下拉列表的显示 const handleSearch = (value: string) => { //debugger; if (value) { let data: mapResType[] = []; mapList.map((item, index) => { if ((item.localName || '').indexOf(value) > -1) { data.push({ text: item.localName, value: item.localName, }); } }); setMatchData(data); console.log('search', data); } else { setMatchData([]); } }; //这是搜索的下拉列表的点击 const handleChange = (sel: string) => { //debugger; setValue(null); //清空输入的值 setMatchData([]); //清空搜索匹配列表 onSearch(sel); }; const handelInputKeyDown = (e) => { // 如果点击回车的操作 console.log('keydown', matchData); if (e.code == 'Enter') { if (matchData.length == 1) { onSearch(matchData[0].text); } } }; return (
); }; export default SearchInput;