mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
2ea28af6ed
* init * fix firefox * add active style * adjust arrow style * update select * update icon logic * render empty * init multiple * fix ff display style * sync font size * adjust padding style * add padding * padding it * hotfix of chrome * single sm * multiple size * update option group style * update snapshot * clean up transition * rm combobox in ts define * auto complete init * fix auto option def * update demo * update demo * update uncertain demo * update demo * warning if user set `size` on AutoComplete * add debug demo * updat demo * update demo of disabled * update snapshot * rm useless test * fix pagination test * fix Table test * fix calendar test case * fix calendar test case * adjust style * add big data demo * support clean up * fix ts define * fix lint * fix demo lint * fix style lint fix * rm useless deps * update snapshot * stop mock * add space
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={[]}
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);