我用antdesign插件，配合react-dedux做了一个项目，但是Modal弹出来的table中的第一列复选框不能刷新？

Question

这个页面是antdesign的Modal，是底层点个按钮弹出来的，table中的第一列序号，如图，现在序号1被我选中了，然后我点击取消（或确认关掉了这个Modal），当我再点击底层的按钮，弹出这个框后，会发现原来选择的序号1还是被选中了，这是为什么呢，下面我发下代码

return (
      <div style={{display:"inline"}}>
        <Modal title="指派专家"
          visible={this.props.appointExpertPostFormReduce.get('addModleVisible')}
          onhandleRelease={this.handleSubmit}
          confirmLoading={this.props.appointExpertPostFormReduce.get('confirmLoading')}
          onCancel={this.props.appointExpertPostFormAction.onCancel}
          width={900} 
          maskClosable={false}
           footer={[
            <Button style={{backGround:"#000"}} key="btn" type="ghost" size="large" onClick={this.props.appointExpertPostFormAction.onCancel}>
              取 消
            </Button>,
            <Button key="submit" type="primary" size="large" onClick={this.handleSubmit}>
              确 定
            </Button>,
          ]}
        >
          <Form horizontal>
            <label style={{display:"block",marginBottom:-28}}>指派进度：</label>
            <Button type="primary" style={{marginLeft:782,marginBottom:7}} onClick={this.onNewPostFormClick}>
                  添加专家
              </Button>
            <FormItem {...formItemLayout}>
              <div className="ant-advanced-table">
                <Table 
                    columns={columns}
                    rowKey={record => record.id}//特别注意，需要设置表格主键唯一id的名称，以优化react显示
                    dataSource={appointExpertPostFormReduce.get('data').toJSON()}
                    pagination={false}
                    loading={appointExpertPostFormReduce.get('loading')}
                    onChange={this.handleTableChangePrepare}
                    onRowClick= {this.onRowClick} 
                    size="middle"
                    ref="tableRef" 
                    footer={() => (
                      <div style={{height:28}}>
                          
                          <Pagination
                          selectComponentClass={Select}
                          showSizeChanger
                          showQuickJumper
                          onShowSizeChange={this.onShowSizeChange} 
                          onChange={this.onPaginationChange}
                          defaultCurrent={appointExpertPostFormReduce.get('pagination').get('current')} 
                          current={appointExpertPostFormReduce.get('pagination').get('current')} 
                          total={appointExpertPostFormReduce.get('pagination').get('total')}
                          showTotal={(total) => ('共有'+total+'条数据 ')}
                        />
                      </div>
                    )}
                />
              </div>
            </FormItem>        
          </Form>
        </Modal>
      </div>
    );

其中table中的第二行rowSelection={this.rowSelection}是控制表格复选框是否显示的，那么我该怎么做才能让我点击按钮的时候，Modal完全刷新呢？还是说我点击了取消（或确认）的按钮之后，要执行一次吧所有的复选框都清除？
PS。下面的代码是我那个按钮的触发click的代码

onRowClick(record, index, event){
      //console.log('Click Cell ${text}, record.name is ${record.name}');
      let id = event.target.id;
      if(id=="appointExpert"){
        this.props.appointExpertPostFormComponent.resetFields();
        this.props.appointExpertPostFormComponent.props.appointExpertPostFormAction.onShowPostForm(record,this.props.notificationAction,Notification);
      }
      event.preventDefault();
      event.stopPropagation();
  },

Answer 1

因为只是隐藏显示, 并不是传统设计思想中的 append remove. 我也遇到过这个问题, 建议用state 去控制, 在关闭的时候清空配合rowSelection.onChange使用

// rowSelection object indicates the need for row selection
const rowSelection = {
  getCheckboxProps: record => ({
    disabled: record.name === 'Jim Green',    // Column configuration not to be checked
  }),
};

ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
, mountNode);

Answer 2

简单的解决办法，不使用 Modal 的 visible 属性而是每次显示都重建 Modal：
{this.props.appointExpertPostFormReduce.get('addModleVisible') && <Modal visible ...>...</Modal>}

这样可以确保每次 Modal 内部状态都被重置。