React中如何获取子组件数据并传递给父组件函数

原代码问题说明 #

你的写法存在两个核心错误：

1. Render Prop 传参逻辑错误：在Parent组件给Child传递child属性时，你直接执行了child()，没有传入任何参数，函数运行时name、setName均为undefined，会直接触发运行时报错。正确的Render Prop用法是将函数本身作为属性值传递给子组件，由子组件在渲染阶段传入自身参数后调用。
2. 数据流转方向颠倒：如果需要父组件获取子组件的输入、提交数据，不要把共享状态完全放在子组件内部再试图反向注入，要么将共享状态提升到父组件维护，要么通过回调函数由子组件主动向父组件传值。

修正后实现代码 #

Parent.js #

import Child from "./Child";
import { useState } from "react";

export default function Parent() {
  // 共享的列表数据提升到父组件维护
  const [list, setList] = useState([]);

  // 接收子组件提交的新增项
  const handleAdd = (newName) => {
    setList(prev => [...prev, newName]);
    // 此处父组件可直接获取输入值做任意业务处理
    console.log("父组件接收新输入：", newName);
  };

  // 接收子组件传入的状态，返回输入框JSX
  const inputRender = (name, setName) => {
    return (
      <input
        placeholder="Please Input"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    );
  };

  return (
    <>
      {/* 注意：不要加()调用函数，直接传函数引用 */}
      <Child renderInput={inputRender} onSubmitAdd={handleAdd} />
      <div>
        已提交列表：
        {list.map((item, idx) => <p key={idx}>{item}</p>)}
      </div>
    </>
  );
}

Child.js #

import { useState } from "react";

export default function Child({ renderInput, onSubmitAdd }) {
  // 输入过程的临时状态由子组件自行维护
  const [name, setName] = useState("");

  function submitHandler(e) {
    e.preventDefault();
    if (!name.trim()) {
      console.log("Please enter a name");
      return;
    }
    // 提交时调用父组件回调，把值传回父组件
    onSubmitAdd(name);
    setName("");
  }

  return (
    <form onSubmit={submitHandler}>
      {/* 调用父组件传入的render函数，传入子组件自身状态 */}
      {renderInput(name, setName)}
      <button type="submit">Submit</button>
    </form>
  );
}

关键改动说明 #

• 移除了父组件传递prop时对render函数的立即调用，改为传递函数引用，由子组件在渲染时传入name、setName参数执行，解决了undefined报错问题。
• 新增回调传值通道：子组件提交表单时，调用父组件传入的提交回调，将输入值主动传递给父组件，符合React单向数据流规则。
• 共享的列表数据提升到父组件维护，子组件仅维护输入过程的临时状态，状态归属清晰，不会出现多组件状态不同步的问题。

内容的提问来源于stack exchange，提问作者Mohammad Khan