mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-10 17:02:14 +08:00
1.4 KiB
1.4 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
zh-CN
基本使用。通过 options 设置自动完成的数据源
en-US
Basic Usage, set data source of autocomplete with options
property.
import { AutoComplete } from 'antd';
function onSelect(value) {
console.log('onSelect', value);
}
function mockVal(str: string, repeat: number = 1) {
return {
value: str.repeat(repeat),
};
}
class Complete extends React.Component {
state = {
value: '',
options: [],
};
onSearch = searchText => {
this.setState({
options: !searchText
? []
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
});
};
onChange = value => {
this.setState({ value });
};
render() {
const { options, value } = this.state;
return (
<div>
<AutoComplete
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={this.onSearch}
placeholder="input here"
/>
<br />
<br />
<AutoComplete
value={value}
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={this.onSearch}
onChange={this.onChange}
placeholder="control mode"
/>
</div>
);
}
}
ReactDOM.render(<Complete />, mountNode);