antd / transfer + TS

import React, { useState } from 'react';
import { Transfer, Tree } from 'antd';

// Customize Table Transfer
const isChecked = (selectedKeys:any, eventKey:any) => selectedKeys.indexOf(eventKey) !== -1;
 interface TreenodeInter {
  key:any;
  title:any;
  children:any;
}
const generateTree = (treeNodes:any = [], checkedKeys:any = []):any =>

  treeNodes.map(({children, ...props}:any) => ({
    ...props,
    disabled: checkedKeys.includes(props.key),
    children: generateTree(children, checkedKeys),
  }));

interface transferChild {
  dataSource:any;
  targetKeys:any;
  onChange:any;
}
const TreeTransfer: React.FC<transferChild> = ({ dataSource, targetKeys, ...restProps }) => {
  const transferDataSource:any = [];
  function flatten(list = []) {
    list.forEach((item:any) => {
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(dataSource);

  return (
    <Transfer
      {...restProps}
      targetKeys={targetKeys}
      dataSource={transferDataSource}
      className="tree-transfer"
      render={(item:any) => item.title}
      showSelectAll={false}
    >
      {({ direction, onItemSelect, selectedKeys }) => {
        if (direction === 'left') {
          const checkedKeys = [...selectedKeys, ...targetKeys];
          return (
            <Tree
              blockNode
              checkable
              checkStrictly
              defaultExpandAll
              checkedKeys={checkedKeys}
              treeData={generateTree(dataSource, targetKeys)}
              onCheck={(_, { node: { key } }:any) => {
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
              onSelect={(_, { node: { key } }:any) => {
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
            />
          );
        }
      }}
    </Transfer>
  );
};

const treeData = [
  { key: '0-0', title: '0-0' },
  {
    key: '0-1',
    title: '0-1',
    children: [
      { key: '0-1-0', title: '0-1-0' },
      { key: '0-1-1', title: '0-1-1' },
    ],
  },
  { key: '0-2', title: '0-3' },
];

const TreeTransferApp = () => {
  const [targetKeys, setTargetKeys] = useState([]);
  const onChange:any = (keys:any) => {
    setTargetKeys(keys);
  };
  return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
};
export default TreeTransferApp

おすすめ

転載: blog.csdn.net/diaojw090/article/details/106674462