Question

我有两个类，主要的一个，另一个是PopUp。我在主类中有一个显示Modal的按钮，然后单击一个按钮后，PopUp将关闭，如果单击该按钮，我想从另一个类执行一个函数。

如何导出该方法并在模式类中导入？

这是我的方法：

async getKPIs(year, period) {
      try {
        var payloadData = {
          GroupKey: this.props.data.groupkey,
          FamilyKey: this.props.data.id,
          FiscalYear: year,
          PID: period,
        };
        const response = await axios.post(
          config.kpi.getFiscalYearKPIs,
          JSON.stringify(payloadData)
          , { 'headers': { 'Accept': 'application/json', 'Content-Type': 'application/json', 'x-api-key': kpiKey } });

        if (response.status !== 200) {
          this.setState({ failed: true });
          return;
        }
        const kpis = response.data['/kpiinput/view/all'].kpiInput.map(kpi => {
          return {
            GROUP_KEY: kpi.GROUP_KEY,
            FAMILY_KEY: kpi.FAMILY_KEY,
            KPI_KEY: kpi.KPI_KEY,
            KPIFISCALYEAR: kpi.KPIFISCALYEAR,
            KPI_NAME: kpi.KPI_NAME,
            KPI_ORDER: kpi.KPI_ORDER,
            UOM_NAME: kpi.UOM_NAME,
            TYPE_NAME: kpi.TYPE_NAME,
            OPERATOR_NAME: kpi.OPERATOR_NAME,
          };
        });

        this.setState({ kpis, failed: false });
        this.getColumns(period);
      } catch (err) {
        this.setState({ failed: true });
        console.error(err);
      }
    }

当我关闭Swal时，这就是我要在模式类中调用它的地方：

 async approveKPI(e) {
    e.preventDefault();
    var InputValue = this.state.Actualvalue

    if(InputValue){
      try {
      var kpikey = document.getElementById('kpikey').innerText;
      var period = document.getElementById('period').innerText;
      //var typekey = document.getElementById('typekey').innerText;
      var typekey = this.state.CurrentType
      var payloadData = [{
        KPIInputKey: kpikey,
        KPIInputTypeKey: typekey,
        KPIStatus: this.state.derived,
        PID: period,
      }];
      const response = await axios.post(
        config.kpi.approveKPI,
        JSON.stringify(payloadData)
        , { 'headers': { 'Accept': 'application/json', 'Content-Type': 'application/json', 'x-api-key': kpiKey } });
      if (response.status !== 201) {
        this.setState({ failed: true });
        return;
      } else if (response.status === 201) {
        Swal.fire({
          type: 'success',
          title: 'Data Approved Successfully',
        }).then(function () {
          **//Here I want to call the method from the other class**
        });
      }
      this.setState({ show: false });
    } catch (err) {
      Swal.fire({
        type: 'error',
        title: 'Something went Wrong',
        text: 'Try Again',
      }).then(function () {
        //window.location.reload();
      });
      console.log('Error' + err);
      this.setState({ failed: true });
      console.error(err);
    }
    }
    else {
      Swal.fire({
        type: 'warning',
        title: 'Input field empty',
        text: 'Please fill input field',
      })
    } 
  }

Answer 1

Alberto，我们已经知道模态是该组件的子代，就像您要发送的方法一样。

因此，在渲染ApprovePopup模态的同时，将函数作为属性传递给它，例如：

<ApprovePopup row={row} disabled={true} getKPIs={this.getKPIs}/>

然后，在模式的其他函数approveKPI中：

 async approveKPI(e) {
    e.preventDefault();
    var InputValue = this.state.Actualvalue;
    const { getKPIs } = this.props; //destructive declaration for getKPIs

    if(InputValue){
      try {
      var kpikey = document.getElementById('kpikey').innerText;
      var period = document.getElementById('period').innerText;
      //var typekey = document.getElementById('typekey').innerText;
      var typekey = this.state.CurrentType
      var payloadData = [{
        KPIInputKey: kpikey,
        KPIInputTypeKey: typekey,
        KPIStatus: this.state.derived,
        PID: period,
      }];
      const response = await axios.post(
        config.kpi.approveKPI,
        JSON.stringify(payloadData)
        , { 'headers': { 'Accept': 'application/json', 'Content-Type': 'application/json', 'x-api-key': kpiKey } });
      if (response.status !== 201) {
        this.setState({ failed: true });
        return;
      } else if (response.status === 201) {
        Swal.fire({
          type: 'success',
          title: 'Data Approved Successfully',
        }).then(function () {
          **//Here I want to call the method from the other class**
          getKPIs(); //we are using the function we sent as props to the modal
        });
      }
      this.setState({ show: false });
    } catch (err) {
      Swal.fire({
        type: 'error',
        title: 'Something went Wrong',
        text: 'Try Again',
      }).then(function () {
        //window.location.reload();
      });
      console.log('Error' + err);
      this.setState({ failed: true });
      console.error(err);
    }
    }
    else {
      Swal.fire({
        type: 'warning',
        title: 'Input field empty',
        text: 'Please fill input field',
      })
    } 
  }

详细了解组件与其子元素之间的callbacks关系。

如何从ReactJS中的另一个类调用方法？

1 个答案: