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

Question

我正在构建一个使用一些 React Hook 和一些类组件的应用程序 - 这不是一个好方法，但我需要时间。如何使用 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

你可以像这样通过 props 从子组件发送到父组件

这是子组件

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