Transfer 穿梭框

双栏穿梭选择框。

何时使用

用直观的方式在两栏中移动元素，完成选择行为。

选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。 其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。

代码演示

基本用法

最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer } from 'choerodon-ui';
​
const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
    disabled: i % 3 < 1,
  });
}
​
const targetKeys = mockData
        .filter(item => +item.key % 3 > 1)
        .map(item => item.key);
​
class App extends React.Component {
  state = {
    targetKeys,
    selectedKeys: [],
  }
​
  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys });
​
    console.log('targetKeys: ', targetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  }
​
  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
​
    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);

带搜索框

带搜索框的穿梭框，可以自定义搜索函数。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer } from 'choerodon-ui';
​
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 });
  }
​
  filterOption = (inputValue, option) => {
    return option.description.indexOf(inputValue) > -1;
  }
​
  handleChange = (targetKeys) => {

高级用法

穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer, Button } from 'choerodon-ui';
​
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) => {
    this.setState({ targetKeys });
  }
​
  renderFooter = () => {
    return (
      <Button
        size="small"
        style={{ float: 'right', margin: 5 }}
        onClick={this.getMock}

自定义渲染行数据

自定义渲染每一个 Transfer Item，可用于渲染复杂数据。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer } from 'choerodon-ui';
​
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>

大数据性能测试

2000 条数据。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer } from 'choerodon-ui';
​
class App extends React.Component {
  state = {
    mockData: [],
    targetKeys: [],
  }
​
  componentDidMount() {
    this.getMock();
  }
​
  getMock = () => {
    const targetKeys = [];
    const mockData = [];
    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) {
        targetKeys.push(data.key);
      }
      mockData.push(data);
    }
    this.setState({ mockData, targetKeys });
  }
​
  handleChange = (targetKeys, direction, moveKeys) => {
    console.log(targetKeys, direction, moveKeys);
    this.setState({ targetKeys });
  }
​

API

注意

按照 React 的规范，所有的组件数组必须绑定 key。在 Transfer 中，dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。

// 比如你的数据主键是 uid
return <Transfer rowKey={record => record.uid} />;