mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
1.9 KiB
1.9 KiB
order | title | ||||
---|---|---|---|---|---|
12 |
|
zh-CN
一个带有远程搜索,防抖控制,请求时序控制,加载状态的多选示例。
en-US
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';
const { Option } = Select;
class UserRemoteSelect extends React.Component {
constructor(props) {
super(props);
this.lastFetchId = 0;
this.fetchUser = debounce(this.fetchUser, 800);
}
state = {
data: [],
value: [],
fetching: false,
};
fetchUser = value => {
console.log('fetching user', value);
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({ data: [], fetching: true });
fetch('https://randomuser.me/api/?results=5')
.then(response => response.json())
.then(body => {
if (fetchId !== this.lastFetchId) {
// for fetch callback order
return;
}
const data = body.results.map(user => ({
text: `${user.name.first} ${user.name.last}`,
value: user.login.username,
}));
this.setState({ data, fetching: false });
});
};
handleChange = value => {
this.setState({
value,
data: [],
fetching: false,
});
};
render() {
const { fetching, data, value } = this.state;
return (
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Select users"
notFoundContent={fetching ? <Spin size="small" /> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{ width: '100%' }}
>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
);
}
}
ReactDOM.render(<UserRemoteSelect />, mountNode);