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

图片描述
这个页面是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();
  },
阅读 7.3k
2 个回答

因为只是隐藏显示, 并不是传统设计思想中的 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);

clipboard.png

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏