Package Exports

@uiw/react-transfer
@uiw/react-transfer/cjs/index.js
@uiw/react-transfer/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-transfer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Transfer 穿梭框

选择一个或以上的选项后，点击左右的方向按钮，可以把选中的选项移动到另一栏为选中。在 v4.14.0+ 添加。

基础用法

最简单的用法。

import React from 'react';
import { Transfer, Row } from 'uiw';

function Demo() {

  const options = [
    { label: '武汉市',  key: 1 },
    { label: '汉南区1', key: 5 },
    { label: '汉南区2', key: 6 },
    { label: '汉南区3', key: 7 },
  ]

  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])

  return (
    <Row style={{ flexDirection:'column' }} >
      <Transfer
        options={options}
        value={value}
        onChange={(transfer,option)=>{
          valueSet(option)
        }}
      />
    </Row>
  );
}

export default Demo

树形节点

使用 Tree 结构作为选项节点

import React from 'react';
import { Transfer, Row } from 'uiw';

function Demo() {
const options = [
    {
      label: '武汉市',
      key: 1,
      children: [
        { label: '新洲区', key: 2, disabled: true },
        { label: '武昌区', key: 3 },
        {
          label: '汉南区',
          key: 4,
          children: [
            { label: '汉南区1', key: 5 },
            { label: '汉南区2', key: 6 },
            { label: '汉南区3', key: 7 },
          ]
        },
      ]
    }
  ];

  const [value,valueSet] = React.useState([{ label: '汉南区1', key: 5 }])

  return (
    <Row style={{ flexDirection:'column' }} >
      <Transfer
        options={options}
        value={value}
        onChange={(transfer,option)=>{
          valueSet(option)
        }}
      />
    </Row>
  );
}

export default Demo

全部选择

将selectedAll设置为true,启用全部勾选功能

import React from 'react';
import { Transfer, Row } from 'uiw';

function Demo() {

  const options = [
    {
      label: '武汉市',
      key: 1,
      children: [
        { label: '新洲区', key: 2 },
        { label: '武昌区', key: 3 },
        {
          label: '汉南区',
          key: 4,
          children: [
            { label: '汉南区1', key: 5 },
            { label: '汉南区2', key: 6 },
            { label: '汉南区3', key: 7 },
          ]
        },
      ]
    }
  ];

  const [value,valueSet] = React.useState([{ label: '武昌区', key: 3 }, { label: '汉南区1', key: 5 }])

  return (
    <Row style={{ flexDirection:'column' }} >
      <Transfer
        options={options}
        selectedAll={true}
        value={value}
        onChange={(transfer,option)=>{
          valueSet(option)
        }}
      />
    </Row>
  );
}

export default Demo

搜索选项

将showSearch设置为true，启用选项搜索框

import React from 'react';
import { Transfer, Row } from 'uiw';

function Demo() {
const options = [
    {
      label: '武汉市',
      key: 1,
      children: [
        { label: '新洲区', key: 2, disabled: true },
        { label: '武昌区', key: 3 },
        {
          label: '汉南区',
          key: 4,
          children: [
            { label: '汉南区1', key: 5 },
            { label: '汉南区2', key: 6 },
            { label: '汉南区3', key: 7 },
          ]
        },
      ]
    }
  ];

  const [value,valueSet] = React.useState([
    { label: '武昌区', key: 3 },
    { label: '汉南区1', key: 5 },
    { label: '汉南区2', key: 6 },
  ])

  return (
    <Row style={{ flexDirection:'column' }} >
      <Transfer
        options={options}
        showSearch={true}
        placeholder="搜索内容"
        value={value}
        onChange={(transfer,option)=>{
          valueSet(option)
        }}
      />
    </Row>
  );
}

export default Demo

Form中使用

import React from 'react';
import { Transfer, Form, Row, Col, Button } from 'uiw';

function Demo() {

  const options = [
    { label: '武汉市',  key: 1 },
    { label: '汉南区1', key: 5 },
    { label: '汉南区2', key: 6 },
    { label: '汉南区3', key: 7 },
  ]

  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])
  const form=React.useRef()

  const setValue=()=>{
    form.current.setFields({
     transfer: [
        { label: '汉南区1', key: 5 },
        { label: '汉南区3', key: 7 },
      ]
    })
  }

  const resetValue=()=>{
    form.current.resetForm()
  }

  return (
    <Form
        ref={form}
        onSubmitError={(error) => {
          if (error.filed) {
            return { ...error.filed };
          }
          return null;
        }}
        onSubmit={({initial, current}) => {
          const errorObj = {};
          if (!current.searchTree) {
            errorObj.searchTree = '默认需要选择内容，选择入内容';
          }
          if(Object.keys(errorObj).length > 0) {
            const err = new Error();
            err.filed = errorObj;
            Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
            throw err;
          }
          Notify.success({
            title: '提交成功！',
            description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,
          });
        }}
        fields={{
          transfer: {
            initialValue:[{ label: '汉南区2', key: 6 },{ label: '汉南区3', key: 7 },],
            children: (
              <Transfer options={options}/>
            )
          }
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <div>
              <Row style={{display:'flex',flexDirection:'column'}}>
                <Col >{fields.transfer}</Col>
              </Row>
              <Row>
                <Col fixed>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                  <Button onClick={setValue} type="primary" >setValue</Button>
                  <Button onClick={resetValue} type="primary" >重置</Button>
                </Col>
              </Row>
              <Row>
                <Col>
                  <pre style={{ padding: 10, marginTop: 10 }}>
                    {JSON.stringify(state.current, null, 2)}
                  </pre>
                </Col>
              </Row>
            </div>
          )
        }}
      </Form>
  );
}

export default Demo

Props

参数	说明	类型	默认值
bodyStyle	选项区域样式	Object	{ height: 200px, overflow-y: auto }
onChange	点击穿梭时回调	(arrow, selectkeys) => void	-
value	指定当前选中的条目	[{label, key }]	-
options	下拉数据源,可参考Tree下拉数据源	[{ label, key, children: [{label, key}] }]	-
showSearch	启用搜索	boolean	false
placeholder	搜索输入框文字	string	-
onSearch	搜索时回调函数	(arrow, searchValue) => void	-
selectedAll	启用全部勾选	boolean	false