• ant design 每次打开Modal弹窗都调用接口重新初始化


    要求:每次打开修改弹窗都根据该条数据的ID发请求获取数据渲染表格

    解决办法:给Modal添加key,每次弹出的时候 改变key的值,保证每次key的值不同

    代码:

    在state中设定一个初始值,并在Modal中给模态框设置key

    constructor(props) {
            super(props);
            this.state = {
                modalKey:0,
            };
        }
    <Modal width={800} title="修改" visible={this.state.editModalVisible}
                            onCancel={() => { this.setState({ editModalVisible: false, modalKey: this.state.modalKey + 1 }); }}
                            onOk={this.handleModalOk.bind(this)}
                            confirmLoading={this.state.confirmLoading}
                            key={this.state.modalKey}
                            >
                        </Modal>

    在点击确定的回调函数中,将state中的modalKey在原来的基础上加1

    handleEditSubmit() {
            const obj = this;
            console.log('原参数:'+obj.state.formData.AGT_ID);
            console.log('修改回调参数1:'+obj.state.formData.reference_id);
            let param = {
                id : obj.state.formData.AGT_ID,
                recomm : obj.state.formData.reference_id,
            }
            const opt = {
              url: agt.info.updateAleAgtInfo,
              type: 'POST',
              dataType: 'json',
              data: param,
            };
            callAjax(opt, (result) => {
              if (result.rspCod === '01000000') {
                openNotice('success', '成功', '提示');
                obj.props.form.resetFields();
                obj.setState({
                  modalKey: obj.state.modalKey + 1,
                }, () => {
                  obj.setState({
                    tdTableReload: false,
                  });
                });
              } else {
                openNotice('error', result.rspMsg, '提示');
                obj.setState({
                  confirmLoading: false,
                });
              }
            }, () => {
              openNotice('error', rspInfo.RSP_NETWORK_ERROR, '提示');
              obj.setState({
                confirmLoading: false,
              });
            });
        }

    在Modal弹窗的取消按钮中,将state中的modalKey在原来的基础上加1

    <Modal width={800} title="修改" visible={this.state.editModalVisible}
                            onCancel={() => { this.setState({ editModalVisible: false, modalKey: this.state.modalKey + 1 }); }}
                            onOk={this.handleModalOk.bind(this)}
                            confirmLoading={this.state.confirmLoading}
                            key={this.state.modalKey}
                            >
                        </Modal>

    这样就能在每次打开弹窗的时候都能重新刷新弹窗中表格的内容了

    参考:https://blog.csdn.net/qq_40319394/article/details/105814183

  • 相关阅读:
    【洛谷P1558】色板游戏
    【SCOI2010】序列操作
    Windows下MySQL下载安装、配置与使用
    Redis和MySQL数据同步及Redis使用场景
    python的设计模式之MVC模式
    python 面试真题
    python调用C语言
    一次跨域请求出现 OPTIONS 请求的问题及解决方法
    服务器宕机问题
    页面静态化
  • 原文地址:https://www.cnblogs.com/cailijuan/p/13677746.html
Copyright © 2020-2023  润新知