2016-03-31 09:40:55 +08:00
|
|
|
---
|
|
|
|
order: 0
|
2016-08-03 10:10:13 +08:00
|
|
|
title:
|
|
|
|
zh-CN: 基本用法
|
|
|
|
en-US: Basic
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-11-25 23:17:06 +08:00
|
|
|
|
2016-08-03 10:10:13 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2017-03-01 11:07:19 +08:00
|
|
|
最基本的用法,展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `onChange` `onSelectChange` `onScroll` 的用法。
|
2015-11-25 23:17:06 +08:00
|
|
|
|
2016-08-04 09:23:10 +08:00
|
|
|
## en-US
|
2016-08-04 09:13:36 +08:00
|
|
|
|
2017-03-01 11:07:19 +08:00
|
|
|
The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
|
2016-08-03 10:10:13 +08:00
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
````jsx
|
2018-09-15 15:18:59 +08:00
|
|
|
import { Transfer, Switch } from 'antd';
|
2015-11-25 23:17:06 +08:00
|
|
|
|
2016-11-04 17:46:01 +08:00
|
|
|
const mockData = [];
|
|
|
|
for (let i = 0; i < 20; i++) {
|
|
|
|
mockData.push({
|
|
|
|
key: i.toString(),
|
|
|
|
title: `content${i + 1}`,
|
|
|
|
description: `description of content${i + 1}`,
|
2016-11-22 13:43:53 +08:00
|
|
|
disabled: i % 3 < 1,
|
2016-11-04 17:46:01 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-09-15 15:18:59 +08:00
|
|
|
const oriTargetKeys = mockData
|
2018-06-27 15:55:04 +08:00
|
|
|
.filter(item => +item.key % 3 > 1)
|
|
|
|
.map(item => item.key);
|
2016-11-04 17:46:01 +08:00
|
|
|
|
2017-02-19 20:51:40 +08:00
|
|
|
class App extends React.Component {
|
|
|
|
state = {
|
2018-09-15 15:18:59 +08:00
|
|
|
targetKeys: oriTargetKeys,
|
2017-02-19 20:51:40 +08:00
|
|
|
selectedKeys: [],
|
2018-09-15 15:18:59 +08:00
|
|
|
disabled: false,
|
2017-02-19 20:51:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
handleChange = (nextTargetKeys, direction, moveKeys) => {
|
2016-11-04 17:46:01 +08:00
|
|
|
this.setState({ targetKeys: nextTargetKeys });
|
|
|
|
|
2018-09-15 15:18:59 +08:00
|
|
|
console.log('targetKeys: ', nextTargetKeys);
|
2016-11-04 17:46:01 +08:00
|
|
|
console.log('direction: ', direction);
|
|
|
|
console.log('moveKeys: ', moveKeys);
|
2017-02-19 20:51:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
2016-11-04 17:46:01 +08:00
|
|
|
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
|
|
|
|
|
2016-09-18 10:44:22 +08:00
|
|
|
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
|
|
|
|
console.log('targetSelectedKeys: ', targetSelectedKeys);
|
2017-02-19 20:51:40 +08:00
|
|
|
}
|
|
|
|
|
2017-03-01 11:07:19 +08:00
|
|
|
handleScroll = (direction, e) => {
|
|
|
|
console.log('direction:', direction);
|
|
|
|
console.log('target:', e.target);
|
|
|
|
}
|
|
|
|
|
2018-09-15 15:18:59 +08:00
|
|
|
handleDisable = (disabled) => {
|
|
|
|
this.setState({ disabled });
|
|
|
|
};
|
|
|
|
|
2015-11-26 11:18:37 +08:00
|
|
|
render() {
|
2018-09-15 15:18:59 +08:00
|
|
|
const { targetKeys, selectedKeys, disabled } = this.state;
|
2015-12-28 11:03:58 +08:00
|
|
|
return (
|
2018-09-15 15:18:59 +08:00
|
|
|
<div>
|
|
|
|
<Transfer
|
|
|
|
dataSource={mockData}
|
|
|
|
titles={['Source', 'Target']}
|
|
|
|
targetKeys={targetKeys}
|
|
|
|
selectedKeys={selectedKeys}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
onSelectChange={this.handleSelectChange}
|
|
|
|
onScroll={this.handleScroll}
|
|
|
|
render={item => item.title}
|
|
|
|
disabled={disabled}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Switch unCheckedChildren="disabled" checkedChildren="disabled" checked={disabled} onChange={this.handleDisable} />
|
|
|
|
</div>
|
2015-12-28 11:03:58 +08:00
|
|
|
);
|
2017-02-19 20:51:40 +08:00
|
|
|
}
|
|
|
|
}
|
2015-11-26 11:18:37 +08:00
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
ReactDOM.render(<App />, mountNode);
|
2015-11-25 23:17:06 +08:00
|
|
|
````
|