当我们在antd表中使用rowSelection在父行上选择时选择子行答案

【问题标题】：Select child rows when we select on the parent row using rowSelection in antd table当我们在antd表中使用rowSelection在父行上选择时选择子行
【发布时间】：2020-01-18 08:00:14
【问题描述】：

我正在尝试使用 antd 表的 rowselection reactjs。我正在尝试这个 ant-components-table-demo-expand-children

当我选择父行时，它必须选择该父行的子行（它应该勾选子行）。

this.rowSelection = {
    onSelect: (record, selected, selectedRows) => this.onSelectChange(record, selected, selectedRows),
    onSelectAll: (selected, selectedRows, changeRows) => this.allRowsSelected(selected, selectedRows, changeRows)
};


<Table
    rowKey={data._id}
    columns={this.columns1}
    rowSelection={this.rowSelection}
    expandedRowRender={(record, index, indent, expanded) =>
        this.expanding(record, expanded)                         
    }
    onExpand={this.onExpand}
    dataSource={data}
/>

【问题讨论】：

能否请您详细说明一下使用 SET 而不是 ARRAY。我是 ES6 的新手，请帮助我理解其中的区别。希望这可能是一个澄清这一点的机会。

标签： reactjs antd

【解决方案1】：

当你选择一个parent节点时，你可以从onSelect函数中获取children节点。同样的，你可以通过onSelectAll函数获取select/deselect时的所有节点。

您需要将选定的parent 节点的keys 及其子节点存储在state 中。

对于select/deselect 复选框，您需要像这样将keys 设置/取消设置为selectedRowKeys：selectedRowKeys: Array.from(selectedCBKeys)（selectedCBKeys = 父键 + 它的子键）

const rowSelection = {
      selectedRowKeys: Array.from(selectedCBKeys),

      onChange: (selectedRowKeys, selectedRows) => {},

      onSelect: (record, selected, selectedRows) => {
        this.getKey(record);
      }, 

      onSelectAll: (selected, selectedRows, changeRows) => {
        changeRows.map(item => this.getKey(item));
      }
    };

如何获取父树的所有子节点的key？

只需递归遍历父树。我收集了所有的keys，如下所示：

getKey = data => {
    this.storeKey(data.key); //it just stores the key in "state"
    if (data.children) {
      data.children.map(item => this.getKey(item));
    }
  };

这就是我存储所有密钥的方式。我用Set。

 state = {
    selectedCBKeys: new Set()
  };

  storeKey = key => {

    //If the key is already present in "state" just delete it. 
     //It helps in toggling the checkboxes.. right?

    if (this.state.selectedCBKeys.has(key)) { 
      const newSet = this.state.selectedCBKeys;
      newSet.delete(key);
      this.setState({
        selectedCBKeys: newSet
      });
      return;
    }

    this.setState(prevState => ({
      ...prevState,
      selectedCBKeys: prevState.selectedCBKeys.add(key)
    }));
  };

App.js

import { Table } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: "12%"
  },
  {
    title: "Address",
    dataIndex: "address",
    width: "30%",
    key: "address"
  }
];

const data = [
  {
    key: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        key: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park"
      },
      {
        key: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            key: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park"
          }
        ]
      }
    ]
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  }
];

class App extends Component {
  state = {
    selectedCBKeys: new Set()
  };

  storeKey = key => {
    if (this.state.selectedCBKeys.has(key)) {
      const newSet = this.state.selectedCBKeys;
      newSet.delete(key);
      this.setState({
        selectedCBKeys: newSet
      });
      return;
    }
    this.setState(prevState => ({
      ...prevState,
      selectedCBKeys: prevState.selectedCBKeys.add(key)
    }));
    console.log("new keys: ", key);
  };

  getKey = data => {
    this.storeKey(data.key);
    if (data.children) {
      data.children.map(item => this.getKey(item));
    }
  };
  render() {
    const { selectedCBKeys } = this.state;
    // rowSelection objects indicates the need for row selection
    const rowSelection = {
      selectedRowKeys: Array.from(selectedCBKeys),
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (record, selected, selectedRows) => {
        this.getKey(record);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(
          "onSelectAll: ",
          selected,
          " selectedRows: ",
          selectedRows,
          " changeRows: ",
          changeRows
        );
        // selectedRows.map(item => this.getKey(item));
        changeRows.map(item => this.getKey(item));
      }
    };
    return (
      <div className="parent">
        <Table
          columns={columns}
          rowSelection={rowSelection}
          dataSource={data}
        />
      </div>
    );
  }
}

这是 stackblitz 上的 demo。告诉我，

【讨论】：

【解决方案2】：

从4.4.0 版本开始，更简单的单行解决方案是将checkStrictly 设置为false。

查看更多here 以了解演示及其规范，（Ctrl+F 并搜索关键字“checkStrictly”，演示及其文档都在那里）

rowSelection={{
  checkStrictly: false,
  onChange: (_, selectedRows) => {
    setSelectedRows(selectedRows);
  },
}}

【讨论】：