mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
b0e528d14c
* use flex * show clear btn * support one way * add dropdown * add pagination * support pagination * use flex * operation stretch * pagination works * update selection logic * no need to show checkbox on pagination * fix tree demo * support invert selection * remove current pages * update style * update snapshot * clean up * update test case * update test case * update snapshot * fix lint * add deps * update doc * update hover style * update hover checked style * adjust demo & active region * fix lint * update snapshot
1.4 KiB
1.4 KiB
order | title | ||||
---|---|---|---|---|---|
4 |
|
zh-CN
大数据下使用分页。
en-US
large count of items with pagination.
import { Transfer, Switch } from 'antd';
const App = () => {
const [oneWay, setOneWay] = React.useState(false);
const [mockData, setMockData] = React.useState([]);
const [targetKeys, setTargetKeys] = React.useState([]);
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);
}
setTargetKeys(newTargetKeys);
setMockData(newMockData);
}, []);
const onChange = (newTargetKeys, direction, moveKeys) => {
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}
/>
</>
);
};
ReactDOM.render(<App />, mountNode);