React中如何将子组件的单选框选中值传递给父组件

React里子组件无法直接修改父组件状态，核心实现方式是父组件传递回调函数给子组件，子组件触发回调时把数据传递回去。针对你的单选框场景，具体修改如下：

1. 修改子组件（Gender） #

• 新增props接收父组件传来的回调函数，用于传递选中值
• 修正单选框的选中状态控制：radio组件要用checked属性判断是否选中，而非value
• 在状态更新后，调用父组件的回调函数把选中的性别ID（或对应数据）传出去

修改后的子组件代码：

import { useState } from 'react';
import { Form } from 'react-bootstrap'; // 假设你使用react-bootstrap

const genders = [
  {
    id: 1,
    gender: "male",
  },
  {
    id: 2,
    gender: "female",
  },
  {
    id: 3,
    gender: "do not want to share",
  },
];

export function Gender({ onGenderChange }) {
  const [genderValue, setGender] = useState(1);

  const changeGenderValue = (e) => {
    const selectedId = parseInt(e.target.id);
    setGender(selectedId);
    // 调用父组件传来的回调，传递选中值
    if (onGenderChange) {
      onGenderChange(selectedId);
      // 也可以传递完整的性别对象，示例：
      // const selectedGender = genders.find(g => g.id === selectedId);
      // onGenderChange(selectedGender);
    }
  };

  return (
    <Form>
      {genders.map((gender) => (
        <Form.Check
          key={gender.id} // 用唯一id作为key，避免使用数组index
          className="mb-3"
          label={gender.gender}
          name="gendersInput"
          type="radio"
          id={gender.id}
          checked={genderValue === gender.id} // 用checked控制选中状态
          onChange={changeGenderValue}
        />
      ))}
    </Form>
  );
}

2. 修改父组件（App） #

• 父组件维护自身状态存储子组件传递的选中值
• 定义回调函数，接收子组件传来的数据并更新自身状态
• 将回调函数作为props传递给子组件

修改后的父组件代码：

import { useState } from 'react';
import { Card } from 'react-bootstrap';
import { Gender } from './Gender'; // 引入子组件

function App() {
  // 父组件维护选中的性别状态
  const [selectedGenderId, setSelectedGenderId] = useState(1);

  // 定义回调函数，接收子组件传递的值
  const handleGenderChange = (genderId) => {
    setSelectedGenderId(genderId);
    // 这里可以添加其他业务逻辑，比如提交表单、存储到本地存储等
    console.log('父组件收到选中的性别ID:', genderId);
  };

  return (
    <>
      <Card>
        {/* 将回调函数传递给子组件 */}
        <Gender onGenderChange={handleGenderChange} />
        {/* 可在父组件展示选中结果 */}
        <p>当前选中的性别ID: {selectedGenderId}</p>
      </Card>
    </>
  );
}

export default App;

关键改动说明 #

• 子组件通过props接收父组件的回调函数，这是React子传父的标准实现方式
• 修正了单选框的选中控制逻辑：radio组件的checked属性才是控制选中状态的核心，之前的value设置不符合radio组件的使用规范
• 用gender.id作为列表项的key，避免使用数组index作为key引发的渲染异常
• 父组件可在回调函数中对接收到的数据做任意业务处理，比如状态更新、接口请求等

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