javascript - 通过 Input React 将参数从子级传递给父级

Question

我尝试将一些信息从子项的输入字段传递给父项。

我目前的情况是这样的:

父级

import React from "react";
import PropTypes from "prop-types";

import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

import TimelineWidget from "./timeline-widget/timeline-widget.component";
import ContainerTable from "./container-table/container-table.component";
import HistoryTable from "./history-table/history-table.component";
import ShippingOverview from "./shipping-overview/shipping-overview.component";
import MapWidget from "./map-widget/map-widget.component";

import styles from "./shippingInformation.style";

class shippingInformation extends React.Component {
  constructor() {
  super();
    this.inputChange = this.inputChange.bind(this);
  }

  state = {
    searchString: null
  };

  inputChange(input){
    this.setState({ searchString: input });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.DashboardPageWrapper}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={16}>
            <Grid
              key={1}
              item
              xs={12}
              sm={12}
              md={9}
              className={classes.Widget}
            >
              <Typography
                variant="subheading"
                className={classes.WidgetHeading}
              >
                Timeline of Container #
              </Typography>
              <Paper className={classes.WidgetContent}>
                <TimelineWidget />
              </Paper>
            </Grid>

            <Grid
              key={2}
              item
              xs={12}
              sm={12}
              md={3}
              className={classes.Widget}
            >
              <Typography
                variant="subheading"
                className={classes.WidgetHeading}
              >
                Shipping Overview
              </Typography>
              <Paper className={classes.WidgetContent}>
                <ShippingOverview />
              </Paper>
            </Grid>
          </Grid>

          <Grid container justify="center" spacing={16}>
            <Grid item xs={12} sm={12} md={9}>
              <Grid container justify="center" spacing={16}>
                <Grid key={3} item xs={12} className={classes.Widget}>
                  <Typography
                    variant="subheading"
                    className={classes.WidgetHeading}
                  >
                    Containers
                  </Typography>
                  <Paper className={classes.WidgetContent}>
                    <ContainerTable />
                  </Paper>
                </Grid>

                <Grid key={4} item xs={12} className={classes.Widget}>
                  <Typography
                    variant="subheading"
                    className={classes.WidgetHeading}
                  >
                    Status History
                  </Typography>
                  <Paper className={classes.WidgetContent}>
                    <HistoryTable />
                  </Paper>
                </Grid>
              </Grid>
            </Grid>

            <Grid
              key={5}
              item
              xs={12}
              sm={12}
              md={3}
              className={classes.Widget}
            >
              <Typography
                variant="subheading"
                className={classes.WidgetHeading}
              >
                Latest Position
              </Typography>
              <Paper className={classes.WidgetContent}>
                <MapWidget onShippingOverview={this.inputChange.bind(this)} />
              </Paper>
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
}

shippingInformation.propTypes = {
  classes: PropTypes.shape({}).isRequired
};

export default withStyles(styles, { withTheme: true })(shippingInformation);

child

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";

import { Bar } from "react-chartjs-2";
import CountUp from "react-countup";
import classNames from "classnames";

import themeStyles from "./shipping-overview.theme.style";

const styles = theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200
  },
  menu: {
    width: 200
  }
});

export class ShippingOverview extends React.Component {
  state = {
    searchString: null
  };

  handleChange(event){
    this.setState ({ searchString: event.target.value}, () => {
      this.props.onShippingOverview(this.state.searchString);
    })
    // this.props.onShippingOverview(input);
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes["shipping-overview-widget"]}>
        <div>
          <form className={classes.container} noValidate autoComplete="off">
            <TextField
              ref="result"
              id="full-width"
              label="Tracking ID"
              InputLabelProps={{
                shrink: true
              }}
              placeholder="Placeholder"
              fullWidth
              margin="normal"
              onChange={this.handleChange.bind(this)}
              value={this.state.input}
            />
          </form>
        </div>
      </div>
    );
  }
}

ShippingOverview.propTypes = {
  theme: PropTypes.shape({
    palette: PropTypes.shape({
      primary: PropTypes.shape({
        dark: PropTypes.string,
        main: PropTypes.string,
        light: PropTypes.string,
        contrastText: PropTypes.string
      }),
      secondary: PropTypes.shape({
        main: PropTypes.string
      }),
      common: PropTypes.shape({
        white: PropTypes.string
      })
    })
  }).isRequired,
  classes: PropTypes.shape({}).isRequired
};

export default withStyles(themeStyles, { withTheme: true })(ShippingOverview);

当我现在 checkin 子文件只是为了检查 searchString 的状态时(使用 console.log())，它似乎可以工作。但是，一旦我让它通过子程序中的 handleChange 函数运行，它就会给我这个错误:

>> 类型错误:_this2.props.onChild 不是函数

33 | handleChange(event){

34 | this.setState ({ searchString: event.target.value}, () => {

> 35 | this.props.onChild(this.state.searchString);

希望有人能帮忙。顺便说一句，我是个菜鸟...

Answer 1

您在父组件中使用了错误的组件。您的子组件作为 ShippingOverview 导入，但您使用的是 MapWidget。更改为 ShippingOverview 即可。

<ShippingOverview onShippingOverview={this.inputChange} />