ant-design/components/transfer/demo/large-data.md

72 lines
1.4 KiB
Markdown
Raw Normal View History

---
order: 4
title:
zh-CN: 分页
en-US: Pagination
---
## zh-CN
大数据下使用分页。
## en-US
large count of items with pagination.
2019-05-07 14:57:32 +08:00
```jsx
import { Transfer, Switch } from 'antd';
const App = () => {
const [oneWay, setOneWay] = React.useState(false);
const [mockData, setMockData] = React.useState([]);
const [targetKeys, setTargetKeys] = React.useState([]);
2018-06-27 15:55:04 +08:00
React.useEffect(() => {
const newTargetKeys = [];
const newMockData = [];
for (let i = 0; i < 2000; i++) {
const data = {
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
newTargetKeys.push(data.key);
}
newMockData.push(data);
}
2018-06-27 15:55:04 +08:00
setTargetKeys(newTargetKeys);
setMockData(newMockData);
}, []);
const onChange = (newTargetKeys, direction, moveKeys) => {
console.log(newTargetKeys, direction, moveKeys);
setTargetKeys(newTargetKeys);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
return (
<>
<Transfer
dataSource={mockData}
targetKeys={targetKeys}
onChange={onChange}
render={item => item.title}
oneWay={oneWay}
pagination
/>
<br />
<Switch
unCheckedChildren="one way"
checkedChildren="one way"
checked={oneWay}
onChange={setOneWay}
/>
</>
);
};
export default () => <App />;
2019-05-07 14:57:32 +08:00
```