mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 01:29:11 +08:00
a0eb9d31de
* fix: Transfer dataSource cannot be immutable (#28675)
close #28662
* docs: fix errors in example code (#28677)
* ci: expand ie check (#28673)
* ci: expand ie check
* Update issue-open-check.yml
* perf(📦): reduce @babel/runtime package size (#28678)
* perf(📦): reduce @babel/runtime package size
04cd73dea1
* chore(🆙): upgrade @ant-design/react-slick to esm support version
* upgrade @ant-design/tools
* ci: add open condition (#28682)
* fix(Slider): forcePopupAlign null when unmounted (#28699)
* docs: Update overview.zh-CN.md (#28703)
* docs: Update resources.en-US.md (#28701)
* chore: bump rc-select to 12.1.0 (#28715)
* fix: stylelint plugin (#28730)
* Update package.json
* perf(📦): upgrade rc-image to 5.x (#28727)
* refactor: upgrade rc-image to 5.x
reduce bundle size
* upgrade rc-image
* upgrade @ant-design/tools
https://github.com/ant-design/antd-tools/pull/226
* rc-image 5.0.0
* fix image preview icon missing
* refactor code
* docs: example of synchronous rc-tree (#28648)
* ci: fix outputs type
过程中的使用 string。奇怪啊,之前测试过的,今天点的时候发现不行了
* Update package.json
* fix: site overflow cause sticky invalid (#28741)
* fix: site overflow cause sticky invalid
* disable auto scroll
* chore: upgrade rc-dialog and rc-drawer (#28749)
* chore: upgrade rc-dialog and rc-drawer (#28687)
* chore: upgrade rc-dialog and rc-drawer
* upgrade rc-util
* update snapshots
* upgrade rc-util
* upgrade rc-util
* update snapshots
* upgrade rc-dialog
* perf: remove duplicated rc-dialog
Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
Co-authored-by: bigbigbo <zxb141242@163.com>
Co-authored-by: xrkffgg <xrkffgg@gmail.com>
Co-authored-by: Yann Pringault <yann.pringault@gmail.com>
Co-authored-by: godfather <greenday.wj@foxmail.com>
Co-authored-by: Mateusz Wierzbicki <22788841+mateusz-wierzbicki@users.noreply.github.com>
Co-authored-by: Kermit <kermitlx@outlook.com>
Co-authored-by: AkiJoey <akijoey1010635951@gmail.com>
Co-authored-by: qqabcv520 <605655316@qq.com>
Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
1.8 KiB
1.8 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
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.
import React, { useState } from 'react';
import { Transfer } from 'antd';
const mockData = [];
for (let i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
});
}
const initialTargetKeys = mockData.filter(item => +item.key > 10).map(item => item.key);
const App = () => {
const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
const [selectedKeys, setSelectedKeys] = useState([]);
const onChange = (nextTargetKeys, direction, moveKeys) => {
console.log('targetKeys:', nextTargetKeys);
console.log('direction:', direction);
console.log('moveKeys:', moveKeys);
setTargetKeys(nextTargetKeys);
};
const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
console.log('sourceSelectedKeys:', sourceSelectedKeys);
console.log('targetSelectedKeys:', targetSelectedKeys);
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
};
const onScroll = (direction, e) => {
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}
/>
);
};
ReactDOM.render(<App />, mountNode);