将子组件中的多个表单输入字段的数据传递给 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;

在 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

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

这是一个这样做的例子：enter link description here