mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
73 lines
2.1 KiB
Markdown
73 lines
2.1 KiB
Markdown
---
|
|
order: 0
|
|
title:
|
|
zh-CN: 基本用法
|
|
en-US: Basic
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
最基本的用法,展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `onChange` `onSelectChange` `onScroll` 的用法。
|
|
|
|
## en-US
|
|
|
|
The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
|
|
|
|
```tsx
|
|
import { Transfer } from 'antd';
|
|
import type { TransferDirection } from 'antd/es/transfer';
|
|
import React, { useState } from 'react';
|
|
|
|
interface RecordType {
|
|
key: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
|
|
key: i.toString(),
|
|
title: `content${i + 1}`,
|
|
description: `description of content${i + 1}`,
|
|
}));
|
|
|
|
const initialTargetKeys = mockData.filter(item => Number(item.key) > 10).map(item => item.key);
|
|
|
|
const App: React.FC = () => {
|
|
const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
|
|
const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
|
|
|
|
const onChange = (nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
|
|
console.log('targetKeys:', nextTargetKeys);
|
|
console.log('direction:', direction);
|
|
console.log('moveKeys:', moveKeys);
|
|
setTargetKeys(nextTargetKeys);
|
|
};
|
|
|
|
const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
|
|
console.log('sourceSelectedKeys:', sourceSelectedKeys);
|
|
console.log('targetSelectedKeys:', targetSelectedKeys);
|
|
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
|
|
};
|
|
|
|
const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
|
|
console.log('direction:', direction);
|
|
console.log('target:', e.target);
|
|
};
|
|
|
|
return (
|
|
<Transfer
|
|
dataSource={mockData}
|
|
titles={['Source', 'Target']}
|
|
targetKeys={targetKeys}
|
|
selectedKeys={selectedKeys}
|
|
onChange={onChange}
|
|
onSelectChange={onSelectChange}
|
|
onScroll={onScroll}
|
|
render={item => item.title}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|