将子组件中的多个表单输入字段的数据传递给 React 中的父组件(钩子)

Question

我有一个没有重新呈现的子组件，因为它的父组件内部的状态没有更新。我最近发现我需要将数据从子传递到父，但我不确定如何做到这一点。我找到的关于这个主题的大多数教程都向您展示了如何通过发送函数将一个字段或信息传递给父组件，但是我需要将表单上的多个字段发送给父组件。我不知道该怎么做。

这是父组件。

import React, { useState } from "react";
import { useQuery } from "@apollo/client";
import { getStudents } from "../queries";
import StudentDetails from "./StudentDetails";

const StudentList = () => {
const [student, setStudent] = useState("");

const { loading, error, data } = useQuery(getStudents);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error!</p>;
const handleClick = (student)=> {
//console.log(student)

setStudent(student);
};
let filteredStudents = [];
//console.log(data.students)
for(let i = 0; i < data.students.length; i++){
//console.log(data.students[i].class.name)
if(data.students[i].class.name === "1FE1"){
//console.log(data.students[i].name)
filteredStudents.push(data.students[i])
}

}
//console.log(filteredStudents);

return (
<div>
<ul id="student-list">
{data.students.map((student) => (
<li key={student.id} onClick={(e) => handleClick(student)}>{student.name}</li>
))}

</ul>
{
student ? <StudentDetails student={student} /> 
: <p>No Student Selected</p>

}
</div>
);
};
export default StudentList;

这里是名为StudentDetails的子组件，它显示学生的个人信息，因为StudentList的状态没有改变，所以没有重新渲染。

import React from "react";
import { useEffect, useState } from "react";
import { getStudentQuery } from "../queries";
import { useQuery } from "@apollo/client";
import DeleteStudent from "./DeleteStudent"
import EditStudent from "./EditStudent";

const StudentDetails = (props)=> {
console.log(props)
const [astudent, setStudent] = useState(props)

return (
<div id="student-details" >
<h2>Name: {props.student.name}</h2>
<h3>Age: {props.student.age}</h3>
<h3>Class: {props.student.class.name}</h3>
<h3>Test 1 Score: {props.student.test1}</h3>
<DeleteStudent id={props.student.id}/>
<EditStudent id={props.student.id} />
</div>

)

}
export default StudentDetails;

Inside StudentDetails是另一个子组件，名为"EditStudent"这就是我需要以某种方式将表单字段中提交的信息传递给StudentList的地方。

import React, { useEffect, useState } from "react";
import { useMutation } from "@apollo/react-hooks";
//import { getStudents } from "../queries";
import StudentDetails from "./StudentDetails";
import { editStudentMutation, getStudentQuery, getStudents } from "../queries/index";

const EditStudent = (props) => {
console.log(props)
const [name, setName] = useState(); 
const [age, setAge] = useState();
const [test, setTest] = useState();
const [editStudent] = useMutation(editStudentMutation);
const astudent = props
return (

<form id="edit-student" 
onSubmit={(e) => {
e.preventDefault();
editStudent({
variables: {
id: props.id,
name: name,
age: age,
test1: test
},
refetchQueries: [{ query: getStudents}]
});
}}>
<div className="field">
<label>Student Name:</label>
<input type="text"
value={name}
onChange={(e) => setName(e.target.value)}/>
</div>
<div className="field">
<label>Age:</label>
<input type="text"
value={age}
onChange={(e) => setAge(e.target.value)}/>
</div>
<div className="field">
<label>Test One:</label>
<input type="text"
value={test}
onChange={(e) => setTest(e.target.value)}/>
</div>
<button>submit</button>
</form>
)
}
export default EditStudent;

所以是的，我想我明白我需要做什么，但我不知道从哪里开始如何传递所有的信息从EditStudent到StudentList。正如我所提到的，所有关于这个主题的教程都展示了如何发送单个信息，而不是多个信息。有人能就如何实现这一目标提出任何建议吗?

Answer 1

我认为你正在寻找的是解除状态;本质上，父组件将状态传递给子组件，它们都可以访问和更改状态。对于你的情况，我建议将多个状态传递给孩子。

下面是一个这样做的例子:在这里输入链接描述