reactjs - 无法从父反应组件调用子反应组件的属性

Question

以下是父反应组件的jsx代码。我正在尝试将数据从子反应组件传递给父反应组件作为属性（），但它抛出错误为child & parentgenerateReport

未捕获的 TypeError：this.props.generateReport 不是 MetricsReport.generateReport 中的函数（metrics-report.jsx:40）

子.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.getReportType = this.getReportType.bind(this);
    // Add the below line as per the answer but still facing the problem
    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>
          <option value="MetricsByUser">Metrics By User</option>
        </select>
        <button onClick={this.generateReport}>Generate Report</button>
      </div>
    );
  }
}

export default MetricsReport;

父.jsx

import React, { Component } from 'react';
import MetricsReport from '../components/pages/metrics-report';

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

export default metricsReportContainer;

标签： reactjs

Answer 1

You forgot to bind the context this inside child component MetricsReport:

// inside the constructor
this.generateReport = this.generateReport.bind(this);

But you may simply use like this:

<button 
  onClick={this.props.generateReport(this.state.metricsParams)}
>
  Generate Report
</button>