# @uiw/react-transfer

> TreeChecked component

Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-transfer
pnpm add @uiw/react-transfer
yarn add @uiw/react-transfer
bun add @uiw/react-transfer
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2022-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 46.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 740 |
| Maintainers | uiwjs, wcjiang |
| Keywords | checked, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-transfer
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/transfer
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-transfer

## Dependencies (7)

- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3
- [@uiw/react-card](https://npm.io/package/@uiw/react-card.md) ^4.22.3
- [@uiw/react-icon](https://npm.io/package/@uiw/react-icon.md) ^4.22.3
- [@uiw/react-tree](https://npm.io/package/@uiw/react-tree.md) ^4.22.3
- [@uiw/react-input](https://npm.io/package/@uiw/react-input.md) ^4.22.3
- [@uiw/react-checkbox](https://npm.io/package/@uiw/react-checkbox.md) ^4.22.3
- [@uiw/react-tree-checked](https://npm.io/package/@uiw/react-tree-checked.md) ^4.22.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 50 more at https://npm.io/package/@uiw/react-transfer/versions

## README

Transfer 穿梭框
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-transfer/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-transfer.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-transfer)
[![npm version](https://img.shields.io/npm/v/@uiw/react-transfer.svg?label=@uiw/react-transfer)](https://npmjs.com/@uiw/react-transfer)

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

## 基础用法

最简单的用法。

```jsx mdx:preview&bg=#fff
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`](#/components/tree) 结构作为选项节点

```jsx mdx:preview&bg=#fff
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`,启用全部勾选功能

```jsx mdx:preview&bg=#fff
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`，启用选项搜索框

```jsx mdx:preview&bg=#fff
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中使用

```jsx mdx:preview&bg=#fff
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 |

---
_Source: https://npm.io/package/@uiw/react-transfer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._