在 React 组件化开发中，父子组件之间的数据传递是基础且高频的需求，尤其是当子组件内部包含表单元素时，如何将用户操作产生的数据同步到父组件成为必须掌握的技能。单选按钮组作为一种常见的表单控件，其选中值通常需要由父组件统一管理，以便用于表单提交、条件渲染或业务逻辑处理。本文将围绕子组件单选按钮表单数据通过 onChange 事件传递给父组件的实现过程展开，从状态提升、受控组件、回调函数绑定以及多组扩展等角度进行详细说明。
理解受控单选按钮与状态提升
在 React 中，表单元素通常有两种工作模式：受控组件和非受控组件。对于单选按钮组，推荐使用受控组件方式，将选中状态保存在 React 状态中，而不是直接依赖 DOM 本身。当单选按钮的选中值由父组件传入的 props 决定时，子组件只负责展示和触发事件，数据源在父组件，这种模式就是状态提升。状态提升的核心价值在于让数据流向保持单向和可预测，父组件作为唯一数据源，可以方便地对子组件传递来的值进行统一处理，例如提交到服务器、驱动其他 UI 区域更新或进行表单校验。
具体到单选按钮，每个 <input type="radio"> 元素需要设置 name 属性以确保同组互斥，但在 React 受控组件中，互斥逻辑主要由 checked 属性约束，name 属性仍然建议设置以保持 HTML 语义。当多个选项都绑定同一个状态，并且 checked 与当前状态值严格相等时，就能实现同组中只有一个选项被选中。子组件不需要关心数据如何使用，只需要在用户操作时调用父组件提供的回调函数，将当前选项值传回。
状态提升带来的另一个好处是便于调试和测试。由于所有状态变更都集中在父组件，开发者可以通过父组件的 useState 或 useReducer 状态值直接观察数据变化，而不必深入子组件内部查找。对于需要多个子组件共享同一份表单数据的场景，状态提升几乎是必须的选择。
父组件状态管理与回调函数设计
父组件需要定义存储单选按钮选中值的状态。使用 useState 钩子可以方便地创建状态变量和更新函数，例如 const [selectedValue, setSelectedValue] = useState('') 会初始化一个空字符串，表示尚未选择任何选项。更新函数 setSelectedValue 用于改变状态，并触发组件重新渲染。为了让子组件能够修改父组件状态，需要将更新逻辑封装成一个回调函数，例如 handleRadioChange，该函数接收子组件传递过来的选项值，并调用 setSelectedValue 更新状态。
回调函数通常通过 props 传递给子组件，命名上可以采用 onRadioChange 或 onValueChange 等，遵循“on+事件”的命名习惯。在父组件渲染子组件时，除了传递回调函数，还应将当前选中值也作为 props 传递下去，例如 selectedValue={selectedValue}。这样子组件就能根据该值决定哪个单选按钮被选中，保证父子数据同步。父组件还可以在回调函数中加入额外的业务逻辑，如打印日志、更新其他状态或调用接口。
下面是一个完整的父组件实现示例，展示了状态定义、回调函数封装以及向子组件传递 props 的过程。
import React, { useState } from 'react';
import RadioGroup from './RadioGroup';
const ParentComponent = () => {
// 定义状态存储单选按钮选中值
const [selectedValue, setSelectedValue] = useState('');
// 处理子组件传递过来的单选按钮值
const handleRadioChange = (value) => {
setSelectedValue(value);
// 可以在此处添加额外业务逻辑，例如打印或调用接口
};
return (
<div>
<h3>父组件当前选中值：{selectedValue}</h3>
{/* 将更新函数和当前值传递给子组件 */}
<RadioGroup
selectedValue={selectedValue}
onRadioChange={handleRadioChange}
/>
</div>
);
};
export default ParentComponent;
子组件渲染与 onChange 事件绑定
子组件接收父组件传入的 props 后，需要渲染一组单选按钮。如果选项是固定的，可以直接编写多个 <input type="radio">；如果选项来自配置数组，则可以使用 map 方法动态生成。动态生成时，每个选项需要设置唯一的 key 属性，一般使用选项的 value 或索引。这样可以帮助 React 在列表更新时正确识别每个元素，避免渲染异常。
每个单选按钮需要设置 value 属性表示该选项的值，并设置 checked 属性与父组件传入的选中值进行比较。比较表达式如 checked={props.selectedValue === item.value}，当两者相等时该按钮被选中。这是受控组件的关键，确保单选按钮的可视状态始终与父组件状态一致。在 <input> 元素上绑定 onChange 事件，当用户点击单选按钮时触发。