在React组件化开发中，父子组件的数据通信是基础且高频的需求，当子组件包含单选按钮这类表单元素时，需要借助onChange事件将用户选择的数据同步到父组件中进行统一处理。
核心实现思路
实现该功能的整体逻辑分为三个步骤：首先在父组件中定义存储单选按钮值的状态和对应的更新函数，然后将更新函数通过props传递给子组件，最后在子组件的单选按钮上绑定onChange事件，触发时调用父组件传入的更新函数完成数据传递。
父组件实现
父组件需要维护单选按钮的选中值状态，并提供修改该状态的方法，通过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;
子组件实现
子组件接收父组件传入的props，渲染单选按钮组，在onChange事件中调用父组件的方法传递选中值。
import React from 'react';
const RadioGroup = (props) => {
// 单选按钮选项配置
const radioOptions = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
];
return (
<div>
<p>请选择单选按钮：</p>
{radioOptions.map((item) => (
<label key={item.value} style={{ marginRight: '15px' }}>
<input
type="radio"
value={item.value}
checked={props.selectedValue === item.value}
onChange={() => props.onRadioChange(item.value)}
/>
{item.label}
</label>
))}
</div>
);
};
export default RadioGroup;
关键注意点
- 单选按钮的
checked属性需要和父组件传入的选中值做对比，保证选中状态同步 - onChange事件中调用父组件传入的回调函数时，需要把当前单选按钮的value作为参数传递
- 如果单选按钮是动态生成的，需要给每个按钮设置唯一的key值，避免渲染异常
多组单选按钮场景扩展
如果子组件包含多组独立的单选按钮，父组件可以定义对象类型的状态来存储不同组的值，子组件传递数据时同时带上组标识即可。
// 父组件状态定义示例
const [formData, setFormData] = useState({
group1: '',
group2: ''
});
// 更新函数示例
const handleRadioChange = (groupKey, value) => {
setFormData({
...formData,
[groupKey]: value
});
};