mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-08 03:49:11 +08:00
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) => {
return {
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);