mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 01:29:11 +08:00
01ca7c7821
* test: replace testing-lib * test: replace testing-lib * test: replace testing-lib * test: update snap * test: replace testing-lib * test: replace testing-lib * test: update for lint * merge: merge * test: testing-lib * test: replace testing-lib * test: testing-lib * test: testing-lib * test: replace testing-lib * test: replace testing-lib * test: Replace test aria replacment logic * test: Update snapshot * chore: hack for id * test: clean up * test: clean demo * chore: update * test: snapshot update * test: fix snapshot rep logic * test: fix snapshot rep logic * test: fix snapshot rep logic * chore: update demo * test: fix snapshot rep logic * test: Update snapshot * test: rest snapshot * test: update snapshot * test: Update test case * test: config env * chore: clean up * chore: Use renderServer instead * test: adjust testing logic * test: modify test logic * test: split ssr test * test: skip if need skip * chore: ignore test file covv Co-authored-by: 二货机器人 <smith3816@gmail.com>
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
4 |
|
zh-CN
大数据下使用分页。
en-US
large count of items with pagination.
import { Switch, Transfer } from 'antd';
import type { TransferDirection } from 'antd/es/transfer';
import React, { useEffect, useState } from 'react';
interface RecordType {
key: string;
title: string;
description: string;
chosen: boolean;
}
const App: React.FC = () => {
const [oneWay, setOneWay] = useState(false);
const [mockData, setMockData] = useState<RecordType[]>([]);
const [targetKeys, setTargetKeys] = useState<string[]>([]);
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: i % 2 === 0,
};
if (data.chosen) {
newTargetKeys.push(data.key);
}
newMockData.push(data);
}
setTargetKeys(newTargetKeys);
setMockData(newMockData);
}, []);
const onChange = (newTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
console.log(newTargetKeys, direction, moveKeys);
setTargetKeys(newTargetKeys);
};
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;