Question

我想将metricsParams传递到{{1}时，将componentA传递给componentB，并点击btn_genReport。但是它会以generateReport()

的形式抛出错误

componentA（metrics-report.jsx）

Uncaught TypeError: this.props.generateReport is not a function

componentB（metrics-report-container.jsx）

import React, { Component } from 'react';
import { Row, Col, Input, Collapsible, CollapsibleItem } from 'react-materialize';

class MetricsReport extends Component {
    constructor(props) {
      super(props)
      this.state = {
        metricsParams: {reportType: ""}
      }
      this.generateReport = this.generateReport.bind(this);
    }
    getReportType(event) {
      console.log(this.state.metricsParams);
      let metricsParams = {...this.state.metricsParams}
      metricsParams.reportType = event.target.value;
      this.setState({metricsParams});

    }

    generateReport() {
      this.props.generateReport(this.state.metricsParams);
    }
    componentDidMount() {

    }

    render() {
      return (
          <div  class="ushubLeftPanel">
              <label>{'Report Type'}</label>
              <select id="metricsDropDown" className="browser-default" onChange={this.getReportType}>
                <option value="MetricsByContent">Metrics By Content</option>
              </select>
              <button id="btn_genReport" onClick={this.generateReport}>Generate Report</button>
          </div>
      )
    }

}

export default MetricsReport;

Answer 1

是错字吗？

java -jar jenkins.war --httpPort=9090

如果不是错字。我已经检查过您的代码，可以告诉您您的代码完全正常，可以正常工作。

这是演示：https://codesandbox.io/s/zrm8r6x6m4

我的意思是，您的父组件和子组件之间的通信是以正确的方式实现的，没错。

这是我用来检查实施情况的最少代码。

MetricsReportContainer.js

export default metricsReportContainer; // it should be MetricsReportContainer

MetricsReport.js

import React, { Component } from "react";
import MetricsReport from "./MetricsReport";

class MetricsReportContainer extends Component {
  constructor(props) {
    super(props);
    this.generateReport = this.generateReport.bind(this);
  }
  generateReport(metricsParams) {
    console.log(metricsParams);
  }
  render() {
    return (
      <div>
        <MetricsReport generateReport={this.generateReport} />
      </div>
    );
  }
}

export default MetricsReportContainer;

Answer 2

我的坏。我先调用子组件而不是父组件。

尽管x已绑定，但this.props.x不是函数。 React.js

2 个答案: