基本布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Table
    bordered
    rowKey='_id'
    dataSource={roles}
    columns={this.columns}
    pagination={{ defaultPageSize: PAGE_SIZE }}
    rowSelection={{
        type: 'radio',
            selectedRowKeys: [role._id],
                onSelect: (role) => {
                    // 选择某个radio时回调
                    this.setState({
                        role
                    })
                }
    }}
    onRow={this.onRow}
    />

通过rowSelection指定表格为radio类型。onRow为点击行时的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
onRow = (role) => {
    return {
        onClick: (event) => {
            // 点击行
            console.log('row onClick()', role)
            // alert('点击行')
            this.setState({
                role
            })
        }
    }
}

树形结构

image-20201119224247690

在AntD4中通过使用treeData来指定树中的数据

1
2
3
4
5
6
7
<Tree
      checkable
      defaultExpandAll={true}
      checkedKeys={checkedKeys}
      onCheck={this.onCheck}
      treeData={this.treeNodes}
      />
1
2
3
getTreeNodes = (menuList) => {
    return [{ title: '平台', key: 'all', children: menuList }]
}

得到最新状态，通过在生命周期getDerivedStateFromProps返回需要设置的状态。（componentWillReceiveProps即将废弃）

1
2
3
4
5
6
7
8
9
10
11
static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.role !== prevState.role) {
      // 将上一个状态的值改编为点击的状态
      prevState.checkedKeys = nextProps.role.menus
      prevState.role = nextProps.role
      return {
        checkedKeys: prevState.checkedKeys
      }
    }
    return null
  }

大体思路如下：

  1. 当每次点击一行数据时，都会触发父组件onRow事件。而在这个组件中进行了重新为role对象赋值的操作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    onRow = (role) => {
        return {
            onClick: (event) => {
                // 点击行
                // console.log('row onClick()', role)
                // alert('点击行')
                this.setState({
                    role
                })
            }
        }
    }

    因此，他也会重新将role对象传递给子组件

  2. 子组件由于具有getDerivedStateFromProps生命周期，因此每次接收到新数据都会触发该生命周期。

    此时，在此生命周期就可以进行判断。当传入对象与当前state记录的对象不一致时则更新数据。将自身记录的对象替换为新传入的对象。（选中的Keys也是替换）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    static getDerivedStateFromProps(nextProps, prevState) {
      // 判断传入对象与当前记录的对象是否是同一个对象
      if (nextProps.role !== prevState.role) {
        return {
          // 将刚传入的值赋值给已保存的值
          checkedKeys: nextProps.role.menus,
          role: nextProps.role
        }
      }
      return null
    }