【前端】【ant-design踩坑】对话框关闭后，穿梭框里的批量操作没有更新选中状态

前言：

经验之谈-官方文档一定要看仔细！

问题：

在Modal对话框里加入带搜索的Transfer穿梭框，如果批量操作的是选中状态，关闭对话框再重新打开，状态没有刷新，如下图

解决思路：

1.首先去ant design官网找相关api，发现了如下图几个api是可以控制选中状态的，分别是selectedKeys，onSelectChange

2.把sourceSelectedKeys，targetSelectedKeys放在state里，初始化为空数组，调用onSelectChange的时候赋值更新，关闭对话框的时候再将这两个置为空数组。然后在Transfer里面新加selectedKeys这个属性，值为

[...sourceSelectedKeys,...targetSelectedKeys]

实现：

1.我是写了两个组件，在一个名为Transfer的组件里写一个按钮用来控制对话框的显示隐藏，以及穿梭框的onChange和onSelectChange事件，并将该组件作为父组件，引入另一个组件TransferModal，之所以将那些change事件写在父组件，是因为需要改变的值都存在了父组件的state中，方便修改。

2.主要代码如下：

state的内容

this.state = {
  modalVisible: false, // 对话框的显示状态
  mockData: [
    {
      key: '12',
      title: '小英雄',
      chosen: true,
    },
    {
      key: '14',
      title: '小排球',
      chosen: true,
    },
    {
      key: '13',
      title: '闪耀暖暖',
      chosen: false,
    },
    {
      key: '16',
      title: '偶像梦幻祭',
      chosen: false,
    },
  ], // 穿梭框的所有信息
  targetKeys: ['12', '14'], // 已选中的节点id
  sourceSelectedKeys: [], // 可选框的id
  targetSelectedKeys: [], // 已选框的id
}

点击穿梭框中的批量操作框

onSelectChange = (s, t) => {
    this.setState({
      sourceSelectedKeys: s,
      targetSelectedKeys: t,
    })
  }

关闭对话框：

closeModal = () => {
    this.setState({
      modalVisible: false,
      sourceSelectedKeys: [],
      targetSelectedKeys: [],
    })
  }

穿梭框内的属性api：

<Transfer
          dataSource={mockData}
          showSearch
          filterOption={this.filterOption}
          targetKeys={targetKeys}
          onChange={handleChange}
          onSearch={this.handleSearch}
          selectedKeys={[...sourceSelectedKeys, ...targetSelectedKeys]}
          onSelectChange={onSelectChange}
          render={item => item.title}
        />