这个页面是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();
},
因为只是隐藏显示, 并不是传统设计思想中的 append remove. 我也遇到过这个问题, 建议用state 去控制, 在关闭的时候清空配合rowSelection.onChange使用