ReactJS V16：如何将父组件函数传递给孙组件事件处理程序

嘿，我完全懂这种被不同版本教程绕晕的感觉——React的版本迭代加上零散的知识点，确实容易让人越学越懵！别担心，咱们一步步把这个「顶层函数逐层传递给子组件触发」的逻辑理清楚，其实核心就是React的单向数据流：父组件的函数通过props往下传，子组件触发事件时调用这个函数，把状态更新的需求“上报”给顶层组件。

第一步：在App组件定义状态和更新函数 #

首先你需要在App里维护要更新的activeFlag状态（如果是多个项目的激活状态，也可以用对象/数组存），然后写对应的更新函数：

import { useState } from 'react';
import ItemGroup from './ItemGroup';

function App() {
  // 假设我们管理单个项目的激活状态，初始为未选中
  const [activeFlag, setActiveFlag] = useState(false);

  // 定义更新函数，接收新的状态值并更新
  const updateActiveFlag = (newActiveState) => {
    setActiveFlag(newActiveState);
    // 可以加个日志方便调试，确认函数被调用
    console.log("激活状态已更新为:", newActiveState);
  };

  return (
    <div className="App">
      {/* 把更新函数作为props传给ItemGroup组件 */}
      <ItemGroup onUpdateActive={updateActiveFlag} />
    </div>
  );
}

export default App;

第二步：ItemGroup组件接收并传递函数 #

ItemGroup本身不需要处理这个函数的逻辑，只需要把它继续往下传给Item组件就行：

import Item from './Item';

// 用解构赋值直接获取props里的onUpdateActive
function ItemGroup({ onUpdateActive }) {
  // 如果是渲染多个Item，可以用数组循环，比如：
  // const items = [{id: 1, name: "项1"}, {id: 2, name: "项2"}];

  return (
    <div className="item-group">
      {/* 把函数继续传给Item组件 */}
      <Item onToggleActive={onUpdateActive} />
      
      {/* 多个Item的写法示例：
      {items.map(item => (
        <Item 
          key={item.id} 
          onToggleActive={onUpdateActive} 
          itemInfo={item} 
        />
      ))}
      */}
    </div>
  );
}

export default ItemGroup;

第三步：Item组件触发函数 #

在Item组件里，给复选框绑定onChange事件，当用户点击复选框时，调用传过来的函数，把复选框的状态传回去：

function Item({ onToggleActive }) {
  return (
    <div className="item">
      <input
        type="checkbox"
        onChange={(e) => {
          // e.target.checked就是复选框的当前状态（true/false）
          onToggleActive(e.target.checked);
        }}
      />
      <span>我是一个可勾选的项目</span>
    </div>
  );
}

export default Item;

几个关键提醒 #

• 语义化命名：给props里的函数起个易懂的名字，比如onUpdateActive、onToggleActive，一眼就能知道是触发什么事件的回调，避免混淆。
• 多项目场景优化：如果是多个项目需要单独管理激活状态，你可以在调用函数时把项目ID也传回去，比如onToggleActive(itemInfo.id, e.target.checked)，然后在App的updateActiveFlag里根据ID更新对应的状态（用对象存储状态：const [activeFlags, setActiveFlags] = useState({})）。
• 单向数据流核心：React里数据和函数只能从父组件流向子组件，所以必须逐层传递，等你熟悉基础后，再去了解Context或者Redux这类可以跨组件传值的工具。

刚开始接触React的数据流确实容易懵，多写几次这种逐层传props的例子，慢慢就会找到感觉啦！

内容的提问来源于stack exchange，提问作者J Cox