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

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

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

子组件：

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;

import React，{useState}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/CircularProgress”导入CircularProgress；
从“@material ui/icons/DeleteForeverIcon”导入DeleteForeverIcon；
从“graphql标签”导入gql；
从“react apollo”导入{Query}；
const DATA_QUERY=gql`
质疑{
人{
边缘{
节点{
名字
姓氏
地址
}
}
}
}
`;
const useStyles=makeStyles（主题=>({
根目录：{
宽度：“100%”，
marginTop：主题。间距（3），
overflowX：“自动”
},
表:{
最小宽度：650
},
进展：{
页边空白：主题。间距（2）
}
}));
导出默认函数SimpleTable（道具）{
const classes=useStyles（）；
const[id，setID]=useState（0）；
const handleEdit=索引=>{
setID（索引）；
控制台日志（id，“编辑”）；
props.getID（id）；
};
返回(
名字
姓
地址
{（{加载，错误，数据}）=>{
如果（装载）{
返回(
);
}
if（错误）console.log（错误）；
控制台日志（数据）；
返回data.persons.edges.map（（person，index）=>(
{
handleEdit（索引）；
}}
>
{person.node.firstName}
{person.node.lastName}
{person.node.address}
));
}}
);
}

父组件：

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;

import React，{Component}来自“React”；
从“apollo boost”导入apollo客户端；
从“react apollo”导入{ApolloProvider}；
从“/containers/Buttons/Buttons”导入按钮；
从“/containers/Table/Table”导入SimpleTable；
导入“/App.css”；
const客户端=新客户端({
uri:“http://localhost:8000/graphql/"
});
类应用程序扩展组件{
状态={
身份证号码：0
};
getID=id=>{
this.setState（{id:id}）；
};
render（）{
返回(
{this.state.id}
);
}
}
导出默认应用程序；

您可以通过道具将其从子组件发送到父组件，如下所示

这是子组件

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>

sendDataToParent=（索引）=>{
props.receiveDataFromChild（索引）；
//如果它是基于类的，那么在像this.props.propName这样的道具前面使用它
}
{this.sendDataToParent（index）}>

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

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}/>

setDataReceivedFromChild=（index）=>{//如果只发送一个参数，则可以在此处使用任何名称
//如果它超过了它必须在相同的顺序，你可以使用任何名称
控制台日志（索引）；
}

如果要发送事件，只需将其作为子组件prop中的第二个参数传递，然后在构造函数中声明您的状态Functional components没有state或构造函数。必须是一个功能组件才能使用React-Hooksclass应用程序扩展组件这在你的代码中意味着什么你是通过回调发送索引的，对吗？是的，就是这个想法