javascript - 如何将变量的值从子组件发送到父组件？

Question

我需要从 CSV 文件加载数据(请参阅下面提供的 CSVDataTable.js)，并将这些数据传递到变量 中的主组件 BatchFlights.js this.state.csvData。然后我在 fetchData() 的 API 请求中使用 this.state.csvData。

组件CSVDataTable.js正确加载数据。但是，如何从 handleChange 中的 BatchFlights.js 访问它？

BatchFlights.js

import React, { Component, Fragment } from 'react';
import TopControls from "./layout/batch/TopControls"
import MainContent from "./layout/batch/MainContent"
import styles from "./layout/styles/styles";
import { withStyles } from "@material-ui/core/styles";


class BatchFlights extends Component {

  constructor(props) {
      super(props);
      this.state = {
          holdingTime: 1,
          csvData: [],
          delay: 0,
          delay_probability: 0,
          delay_cat: "NA",
          labelWidth: 0
      };
      this.handleChange = this.handleChange.bind(this);
  };

  componentDidMount() {
      this.fetchData();
  };

  fetchData = () => {
      const url = "http://localhost:8000?"+
        'holdingTime='+this.state.holdingTime+
        '&csvData='+this.state.csvData;

      fetch(url, {
        method: "GET",
        dataType: "JSON",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        }
      })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        this.updateDelay(data.prediction,data.probability)
      })
      .catch((error) => {
        console.log(error, "catch the hoop")
      })
  };

  handleChange = (name, event) => {
    this.setState({
      [name]: event.target.value
    }, () => {
      console.log("csvData", this.state.csvData)
    });
  };

  render() {
    return (

        <Fragment>

            <TopControls state={this.state} styles={this.props.classes} handleChange={this.handleChange} />

            <MainContent state={this.state} styles={this.props.classes} />

        </Fragment>

    );
  }
}

const StyledBatchFlights = withStyles(styles)(BatchFlights);
export default StyledBatchFlights;

layout/batch/MainContent.js

import React, { Component, Fragment } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import CSVDataTable from './CSVDataTable';

class MainContent extends Component {
    render() {
        return (
          <Fragment>
              <CssBaseline />
              <main className={this.props.styles.mainPart}>
                  <CSVDataTable />
              </main>
          </Fragment>
        );
    }
}

layout/batch/CSVDataTable.js

import React, { Component } from 'react';
import { CsvToHtmlTable } from 'react-csv-to-table';
import ReactFileReader from 'react-file-reader';
import Button from '@material-ui/core/Button';

const sampleData = `
NUM,WAKE,PLANNED_TURNAROUND,SIBT,SOBT,DISTANCE_FROM_ORIGIN,DISTANCE_TO_TARGET
1,M,45,2016-01-01 04:05:00,2016-01-01 14:10:00,2000,2000
`;

class CSVDataTable extends Component {

    state={
      csvData: null
    };

    handleFiles = files => {
        var reader = new FileReader();
        reader.onload =  (e) => {
          // Use reader.result
          this.setState({
            csvData: reader.result
          })
        }
        reader.readAsText(files[0]);
    }

    render() {
        return <div>
          <ReactFileReader
            multipleFiles={false}
            fileTypes={[".csv"]}
            handleFiles={this.handleFiles}>
            <Button
                variant="contained"
                color="primary"
            >
                Load data
            </Button>

          </ReactFileReader>
          <CsvToHtmlTable
            data={this.state.csvData || sampleData}
            csvDelimiter=","
            tableClassName="table table-striped table-hover"
          />
    </div>
    }
}

export default CSVDataTable;

更新:

  setCsvData = csvData => {
    this.setState({
      csvData
    }, () => {
      console.log("csvData",this.state.csvData)
    });
  }

Answer 1

您需要将一个函数从父组件传递到子组件，子组件将依次设置父组件的状态。

因此，在您的代码中，您必须将函数从 BatchFlights.js 传递到 MainContent.js 再到 CSVDataTable.js。

类似这样的事情:

class BatchFlights extends Component {
// ... class code here.

setCsvData = csvData => this.setState({ csvData })

// ...existing code 

<MainContent state={this.state} styles={this.props.classes} setCsvData={this.setCsvData} />

然后在 MainContent.js 中重复相同的过程

<CSVDataTable setCsvData={this.props.setCsvData}/>

然后，您可以在组件中将此函数用作 "this.props.setCsvData" 以及您正在加载的响应。它将设置您的父组件中的状态。