mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
87 lines
1.9 KiB
Markdown
87 lines
1.9 KiB
Markdown
---
|
|
order: 12
|
|
title:
|
|
zh-CN: 搜索用户
|
|
en-US: Search and Select Users
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
一个带有远程搜索,防抖控制,请求时序控制,加载状态的多选示例。
|
|
|
|
## en-US
|
|
|
|
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
|
|
|
|
```jsx
|
|
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);
|
|
```
|