zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    oracle 存储过程
    交错数组
    延迟加载
    js 闭包
    引用类型和值类型
    事务
    web api 之身份验证
    SQLServer中的服务器角色与数据库角色
    按照某一字段的相同值合并所对应的行的值
    VC工程中的字符集工程属性和字符编码(转)
  • 原文地址:https://www.cnblogs.com/cailijuan/p/13677746.html
Copyright © 2011-2022 走看看