Question

我正在构建一个使用一些React Hooks和一些类组件的应用程序-这不是一个好方法，但是我花了很多时间。如何使用React Hooks将数据从子功能组件传递到有状态的类组件？

我要传递的值是表格行的索引？

子组件：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import CircularProgress from "@material-ui/core/CircularProgress";
import DeleteForeverIcon from "@material-ui/icons/DeleteForever";
import gql from "graphql-tag";
import { Query } from "react-apollo";

const DATA_QUERY = gql`
  query {
    persons {
      edges {
        node {
          firstName
          lastName
          address
        }
      }
    }
  }
`;

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3),
    overflowX: "auto"
  },
  table: {
    minWidth: 650
  },
  progress: {
    margin: theme.spacing(2)
  }
}));

export default function SimpleTable(props) {
  const classes = useStyles();

  const [id, setID] = useState(0);

  const handleEdit = index => {
    setID(index);
    console.log(id, "EDIT");
    props.getID(id);
  };

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell align="left">First name</TableCell>
            <TableCell align="left">Last name</TableCell>
            <TableCell>Address</TableCell>
            <TableCell></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <Query query={DATA_QUERY}>
            {({ loading, error, data }) => {
              if (loading) {
                return (
                  <CircularProgress
                    className={classes.progress}
                    color="secondary"
                  />
                );
              }
              if (error) console.log(error);
              console.log(data);
              return data.persons.edges.map((person, index) => (
                <TableRow
                  key={index}
                  value={person}
                  onClick={() => {
                    handleEdit(index);
                  }}
                >
                  <TableCell align="left">{person.node.firstName}</TableCell>
                  <TableCell align="left">{person.node.lastName}</TableCell>
                  <TableCell align="left">{person.node.address}</TableCell>
                  <TableCell align="left">
                    <DeleteForeverIcon />
                  </TableCell>
                </TableRow>
              ));
            }}
          </Query>
        </TableBody>
      </Table>
    </Paper>
  );
}

父组件：

import React, { Component } from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

import Buttons from "./containers/Buttons/buttons";

import SimpleTable from "./containers/Table/table";

import "./App.css";

const client = new ApolloClient({
  uri: "http://localhost:8000/graphql/"
});

class App extends Component {
  state = {
    id: 0
  };

  getID = id => {
    this.setState({ id: id });
  };
  render() {
    return (
      <ApolloProvider client={client}>
        <div className="App">
          <SimpleTable id={this.getID}></SimpleTable>
          {this.state.id}
          <Buttons />
        </div>
      </ApolloProvider>
    );
  }
}

export default App;

Answer 1

您可以像这样通过道具将其从子组件发送到父组件

这是子组件

sendDataToParent=(index)=>{
   props.receiveDataFromChild(index);
      //if its class based use this in front of props like this this.props.propName 
}

<button onClick={()=>{this.sendDataToParent(index)}}> </button>

这是父组件 //在父级中使用此组件

setDataReceivedFromChild=(index)=>{ // you can use any name in here if you only sending one parameter 
         // if it's more than than it has to be in same order you can use any name 
          console.log(index);
}
        <ChildComponent receiveDataFromChild={this.setDataReceivedFromChild}/>

将参数从子功能组件传递到父类组件

1 个答案: