ant-design/components/mention/demo/async.md

61 lines
1.1 KiB
Markdown

---
order: 1
title:
zh-CN: 异步加载
en-US: Asynchronous loading
---
## zh-CN
匹配内容列表为异步返回时。
## en-US
async
````jsx
import { Mention } from 'antd';
const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
const AsyncMention = React.createClass({
getInitialState() {
return {
suggestions: [],
loading: false,
};
},
fetchSuggestions(value, callback) {
setTimeout(() => {
callback(users.filter(item => item.indexOf(value) !== -1));
}, 500);
},
onSearchChange(value) {
this.fetchSuggestions(value, (suggestions) => {
this.setState({
suggestions,
loading: false,
});
});
this.setState({
loading: true,
});
},
render() {
const { suggestions, loading } = this.state;
return (
<Mention
style={{ width: 500, height: 100 }}
loading={loading}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
/>
);
},
});
ReactDOM.render(
<AsyncMention />,
mountNode
);
````