mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-26 20:20:00 +08:00
83 lines
1.6 KiB
Markdown
83 lines
1.6 KiB
Markdown
---
|
||
order: 3
|
||
title:
|
||
zh-CN: 自定义渲染行数据
|
||
en-US: Custom datasource
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
自定义渲染每一个 Transfer Item，可用于渲染复杂数据。
|
||
|
||
## en-US
|
||
|
||
Custom each Transfer Item, and in this way you can render a complex datasource.
|
||
|
||
```jsx
|
||
import { Transfer } from 'antd';
|
||
|
||
class App extends React.Component {
|
||
state = {
|
||
mockData: [],
|
||
targetKeys: [],
|
||
};
|
||
|
||
componentDidMount() {
|
||
this.getMock();
|
||
}
|
||
|
||
getMock = () => {
|
||
const targetKeys = [];
|
||
const mockData = [];
|
||
for (let i = 0; i < 20; i++) {
|
||
const data = {
|
||
key: i.toString(),
|
||
title: `content${i + 1}`,
|
||
description: `description of content${i + 1}`,
|
||
chosen: Math.random() * 2 > 1,
|
||
};
|
||
if (data.chosen) {
|
||
targetKeys.push(data.key);
|
||
}
|
||
mockData.push(data);
|
||
}
|
||
this.setState({ mockData, targetKeys });
|
||
};
|
||
|
||
handleChange = (targetKeys, direction, moveKeys) => {
|
||
console.log(targetKeys, direction, moveKeys);
|
||
this.setState({ targetKeys });
|
||
};
|
||
|
||
renderItem = item => {
|
||
const customLabel = (
|
||
<span className="custom-item">
|
||
{item.title} - {item.description}
|
||
</span>
|
||
);
|
||
|
||
return {
|
||
label: customLabel, // for displayed item
|
||
value: item.title, // for title and filter matching
|
||
};
|
||
};
|
||
|
||
render() {
|
||
return (
|
||
<Transfer
|
||
dataSource={this.state.mockData}
|
||
listStyle={{
|
||
width: 300,
|
||
height: 300,
|
||
}}
|
||
targetKeys={this.state.targetKeys}
|
||
onChange={this.handleChange}
|
||
render={this.renderItem}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<App />, mountNode);
|
||
```
|