如何在子组件之间转移子代？

Question

我正在使用antd's transfer component和antd's table component。

我在transfer组件内部有一个表，其中每一行可以有多个子代。目前，我可以在整个转帐部分中转移父母。有没有办法，我也可以在转移部分转移孩子？我目前不知道该怎么做。

我还在

上创建了一个小的工作示例

沙箱中的组件如下所示：

当前，我能够在组件中转移所有子项的行。例如，eq1和children-1。我还希望能够仅转移上图中的像eq3的children-3之类的孩子。我该怎么办？

这是我用来创建上述视图的代码：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Transfer, Table, Tag } from "antd";

function difference(listOne, listTwo) {
  const set1 = new Set(listOne);
  const set2 = new Set(listTwo);
  const difference = new Set([...set1].filter(x => !set2.has(x)));
  return Array.from(difference);
}
// Customize Table Transfer
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
  <Transfer {...restProps}>
    {({
      direction,
      filteredItems,
      onItemSelectAll,
      onItemSelect,
      selectedKeys: listSelectedKeys,
      disabled: listDisabled
    }) => {
      const columns = direction === "left" ? leftColumns : rightColumns;

      const rowSelection = {
        getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, listSelectedKeys)
            : difference(listSelectedKeys, treeSelectedKeys);
          onItemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          onItemSelect(key, selected);
        },
        selectedRowKeys: listSelectedKeys
      };

      return (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={filteredItems}
          size="small"
          // style={{ pointerEvents: listDisabled ? "none" : null }}
          // onRowClick={(a,b) => {
          //   console.log(JSON.stringify(a), " -- ", b)
          // }}
          onRow={({ key, itemDisabled }) => ({
            onClick: () => {
              console.log(key, "  key");
              console.log(itemDisabled, " itemDisabled");
              if (itemDisabled || listDisabled) return;
              onItemSelect(key, !listSelectedKeys.includes(key));
            }
          })}
        />
      );
    }}
  </Transfer>
);

const mockTags = ["eg", "gg", "e"];

const mockData = [];
for (let i = 0; i < 20; i++) {
  let data = {
    key: i.toString(),
    title: `eq${i + 1}`,
    description: `description of eq${i + 1}`,
    disabled: false, //i % 4 === 0,
    tag: mockTags[i % 3]
  };

  if (i % 2 === 0) {
    const children = [
      {
        key: i.toString() + "children",
        title: `children-${i + 1}`,
        description: `children description-${i + 1}`,
        disabled: false,
        tag: "tag"
      }
    ];
    data["children"] = children;
  }
  mockData.push(data);
}

const originTargetKeys = mockData
  .filter(item => +item.key % 3 > 1)
  .map(item => item.key);

const leftTableColumns = [
  {
    dataIndex: "title",
    title: "Name"
  },
  {
    dataIndex: "tag",
    title: "Tag",
    render: tag => <Tag>{tag}</Tag>
  },
  {
    dataIndex: "description",
    title: "Description"
  }
];
const rightTableColumns = [
  {
    dataIndex: "title",
    title: "Names"
  },
  {
    dataIndex: "tag",
    title: "Tag",
    render: tag => <Tag>{tag}</Tag>
  },
  {
    dataIndex: "description",
    title: "Description"
  }
];

class App extends React.Component {
  state = {
    targetKeys: originTargetKeys
  };

  onChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  render() {
    const { targetKeys, disabled } = this.state;
    return (
      <div>
        <TableTransfer
          className="table-transfer"
          dataSource={mockData}
          titles={[
            <div>
              <input type="checkbox" checked />
              Equipment <input type="checkbox" checked /> Groups
            </div>,
            <div>
              <input type="checkbox" checked />
              Equipment <input type="checkbox" checked /> Groups
            </div>
          ]}
          targetKeys={targetKeys}
          disabled={disabled}
          showSearch={true}
          onChange={this.onChange}
          filterOption={(inputValue, item) =>
            item.title.indexOf(inputValue) !== -1 ||
            item.tag.indexOf(inputValue) !== -1
          }
          leftColumns={leftTableColumns}
          rightColumns={rightTableColumns}
          locale={{
            itemUnit: "Equipment",
            itemsUnit: "Equipments",
            notFoundContent: "The list is empty",
            searchPlaceholder: "Search here"
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));