import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useDebounceFn } from 'ahooks'; import { Input } from 'antd'; import Icon from '@/tenants-ui/Icon'; import cx from 'classnames'; import styles from './index.less'; export default ({ placeholder, onSearch, onCancel }) => { const ref = useRef(); const [focus, setFocus] = useState(false); const [searchValue, setSearchValue] = useState(''); const { run } = useDebounceFn( (val) => { onSearch(val); }, { wait: 500, }, ); const handleClose = useCallback((e) => { if (e.keyCode === 27) { setFocus(false); setSearchValue(''); onCancel(); ref.current.blur(); } }, []); useEffect(() => { document.addEventListener('keyup', handleClose); return () => { document.removeEventListener('keyup', handleClose); }; }, []); return (
setFocus(true)} onBlur={() => { if (!searchValue) { setFocus(false); } }} value={searchValue} placeholder={placeholder} onChange={(e) => { const val = e.target.value; setSearchValue(val); //run(val); onSearch(val); }} />
handleClose({ keyCode: 27 })}> 取消搜索
); };