<Form.Item
label="名称"
name="name"
rules={rulesConfig}
>
<ListAutoComplete />
</Form.Item>
import React, {useState} from 'react';
import {Input, AutoComplete} from 'antd';
const mockVal = (str: string, repeat: number = 1) => {
return {
value: str.repeat(repeat),
};
};
interface AutoCompleteProps {
value?: string;
onChange?: (value: { inputVal: string }) => void;
}
const ListAutoComplete: React.FC<AutoCompleteProps> = ({value, onChange}) => {
const [inputVal, setInputValue] = useState('');
const [options, setOptions] = useState<{ value: string }[]>([]);
const onSearch = (searchText: string) => {
setOptions(
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
);
};
const onSelect = (data: string) => {
if (onChange) {
onChange({inputVal,});
}
};
const handleChange = (data: string) => {
setInputValue(data);
};
return (
<AutoComplete
value={inputVal}
options={options}
onSelect={onSelect}
onSearch={onSearch}
onChange={handleChange}
>
<Input.Search size="large" placeholder="input here" enterButton/>
</AutoComplete>
);
};
export default ListAutoComplete;
- 提交数据获取得到数据name对象