mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
76434a15df
* chore(🆙): upgrade devDeps
* prettier code
* fix dnd demo
* fix react-dnd demo
* fix npm start and demo tsx compile
* fix snapshot
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
zh-CN
基本使用,通过 options
设置自动完成的数据源。
en-US
Basic Usage, set data source of autocomplete with options
property.
import React, { useState } from 'react';
import { AutoComplete } from 'antd';
const mockVal = (str: string, repeat: number = 1) => ({
value: str.repeat(repeat),
});
const Complete: React.FC = () => {
const [value, setValue] = 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) => {
console.log('onSelect', data);
};
const onChange = (data: string) => {
setValue(data);
};
return (
<>
<AutoComplete
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={onSearch}
placeholder="input here"
/>
<br />
<br />
<AutoComplete
value={value}
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={onSearch}
onChange={onChange}
placeholder="control mode"
/>
</>
);
};
ReactDOM.render(<Complete />, mountNode);