本文使用antd4
一、html代码
<Form.Item label={'错误类型'} name="errType">
<Select
style={{ width: 145 }}
placeholder={'请选择错误类型'}
showSearch
onSearch={val => {
handleSearch(val);
}}
onBlur={handleBlur}
>
{errTypeList.map(
(item, index): JSX.Element => {
return (
<Option value={item.errName} key={index}>
{item.errName}
</Option>
);
},
)}
</Select>
</Form.Item>
二、使用onSearch函数监听输入值
const [err, setErr] = useState('');
const handleSearch = useCallback((value): void => {
if (value) {
setErr(value);
}
}, []);
三、使用onBlur函数将数据push进Option数组中
import { uniqWith, isEqual } from 'lodash-es';
const handleBlur = useCallback(
index => {
if (err) {
let errList = [...errTypeList];
errList = [...errTypeList, { errName: err }];
var uniq_user = uniqWith(errList, isEqual);
setErrTypeList(uniq_user);
setErr('');
}
},
[err, errTypeList],
);
四、antd4扩展菜单
发现antd4 扩展菜单这一功能完全支持上述功能
(1)html代码
<Form.Item label={'错误类型'} name="errType">
<Select
style={{ width: 240 }}
placeholder={'请选择错误类型'}
allowClear
showSearch
dropdownRender={menu => (
<div>
{menu}
<Divider style={{ margin: '4px 0' }} />
<div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
<Input style={{ flex: 'auto' }} value={name} onChange={onNameChange} />
<a
style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
onClick={addItem}
>
<PlusOutlined /> 添加筛选项
</a>
</div>
</div>
)}
>
{errTypeList.map(
(item, index): JSX.Element => {
return (
<Option value={item.errName} key={index}>
{item.errName}
</Option>
);
},
)}
</Select>
</Form.Item>
<Form.Item label={'模块'} name="module">
<Select style={{ width: 240 }} placeholder={'请选择模块'} allowClear showSearch>
//筛选项数组
{moduleTypeList.map(
(item): JSX.Element => {
return (
<Option value={item.name} key={item.name}>
{item.name}
</Option>
);
},
)}
</Select>
</Form.Item>
(2)js代码
const [name, setName] = useState('');
//拿到新加的item
const onNameChange = useCallback(event => {
if (event.target.value) {
setName(event.target.value);
}
}, []);
//添加item
const addItem = useCallback(() => {
if (name) {
let errList = [...errTypeList];
errList = [...errTypeList, { errName: name }];
//判断添加的item是否唯一
var uniq_user = uniqWith(errList, isEqual);
setErrTypeList(uniq_user);
setName('');
}
}, [errTypeList, name]);