React：如何从子组件获取单选按钮选中值

问题分析 #

当前代码存在两个核心问题：

• 子组件中仅第一个单选按钮绑定了checked属性，其他单选按钮无法跟随父组件状态同步选中状态
• 父组件仅存储了选中项的价格值，无法直接对应到具体的单选按钮选项

解决方案 #

我们需要让父组件既能管理选中状态，又能明确知道选中的是哪个选项，同时避免直接操作DOM，完全用React状态驱动视图。

步骤1：重构子组件，统一单选按钮的checked绑定 #

给所有单选按钮添加checked属性，基于父组件传入的状态值判断是否选中；同时将价格配置抽离为常量，便于维护。

修改后的子组件代码：

import React from 'react';
import styles from './TradicionalTable.module.css';

// 抽离价格配置为常量，便于维护
const PRECIOS = {
  contabilidad: {
    noAgregar: 0,
    basico: 6615,
    ligero: 8610,
    profesional: 10900,
    premium: 15600,
    corporativo: 31350,
    incrementoDeCinco: 15510,
  },
};

// 计算增量价格
const getIncrementPrice = (count) => {
  return PRECIOS.contabilidad.corporativo + PRECIOS.contabilidad.incrementoDeCinco * count;
};

export default function ContabilidadT({
  selectedContabilidad,
  onContabilidadChange,
}) {
  return (
    <>
      <div className={styles.tradicionalInputs}>
        <div className={styles.tradicionalModuleTitles}>
          <h2>会计</h2>
        </div>

        {/* 不添加 */}
        <div className={styles.inputBox}>
          <input
            id="noAgregarContabilidad"
            checked={selectedContabilidad === 'noAgregar'}
            onChange={() => onContabilidadChange('noAgregar')}
            type="radio"
            name="contabilidad"
          />
          <label htmlFor="noAgregarContabilidad">不添加</label>
        </div>

        {/* 基础版 */}
        <div className={styles.inputBox}>
          <input
            id="basicoContabilidad"
            checked={selectedContabilidad === 'basico'}
            onChange={() => onContabilidadChange('basico')}
            type="radio"
            name="contabilidad"
          />
          <label htmlFor="basicoContabilidad">基础版 1</label>
        </div>

        {/* 轻量版 */}
        <div className={styles.inputBox}>
          <input
            id="ligeroContabilidad"
            checked={selectedContabilidad === 'ligero'}
            onChange={() => onContabilidadChange('ligero')}
            type="radio"
            name="contabilidad"
          />
          <label htmlFor="ligeroContabilidad">轻量版 2</label>
        </div>

        {/* 专业版 */}
        <div className={styles.inputBox}>
          <input
            id="profesionalContabilidad"
            checked={selectedContabilidad === 'profesional'}
            onChange={() => onContabilidadChange('profesional')}
            type="radio"
            name="contabilidad"
          />
          <label htmlFor="profesionalContabilidad">专业版 3</label>
        </div>

        {/* 高级版 */}
        <div className={styles.inputBox}>
          <input
            id="premiumContabilidad"
            checked={selectedContabilidad === 'premium'}
            onChange={() => onContabilidadChange('premium')}
            type="radio"
            name="contabilidad"
          />
          <label htmlFor="premiumContabilidad">高级版 5</label>
        </div>

        {/* 企业版 */}
        <div className={styles.inputBox}>
          <input
            id="corporativoContabilidad"
            checked={selectedContabilidad === 'corporativo'}
            onChange={() => onContabilidadChange('corporativo')}
            type="radio"
            name="contabilidad"
          />
          <label htmlFor="corporativoContabilidad">企业版 10</label>
        </div>

        {/* 用户数量选择 */}
        <div className={styles.inputBox}>
          <select
            id="contabilidadSelect"
            value={selectedContabilidad.startsWith('increment') ? selectedContabilidad : ''}
            onChange={(e) => {
              if (e.target.value) {
                onContabilidadChange(e.target.value);
              }
            }}
          >
            <option value="">用户数 </option>
            <option value="increment1">15</option>
            <option value="increment2">20</option>
            <option value="increment3">25</option>
            <option value="increment4">30</option>
            <option value="increment5">35</option>
            <option value="increment6">40</option>
            <option value="increment7">45</option>
            <option value="increment8">50</option>
          </select>
        </div>

        {/* 显示当前价格 */}
        <div className={styles.inputBox}>
          <div className={styles.moduleTotal}>
            {new Intl.NumberFormat('es-MX', {
              style: 'currency',
              currency: 'MXN',
            }).format(
              selectedContabilidad === 'noAgregar' ? PRECIOS.contabilidad.noAgregar :
              selectedContabilidad === 'basico' ? PRECIOS.contabilidad.basico :
              selectedContabilidad === 'ligero' ? PRECIOS.contabilidad.ligero :
              selectedContabilidad === 'profesional' ? PRECIOS.contabilidad.profesional :
              selectedContabilidad === 'premium' ? PRECIOS.contabilidad.premium :
              selectedContabilidad === 'corporativo' ? PRECIOS.contabilidad.corporativo :
              selectedContabilidad.startsWith('increment') ? getIncrementPrice(parseInt(selectedContabilidad.replace('increment', ''))) :
              0
            )}
          </div>
        </div>
      </div>
    </>
  );
}

步骤2：修改父组件，管理选中的选项标识并计算价格 #

父组件不再直接存储价格，而是存储选中的选项标识，通过标识映射对应的价格，这样既能明确知道选中的选项，又能计算总价。

修改后的父组件代码：

import React, { useState } from 'react';
import ContabilidadT from '../modulos/tradicional/ContabilidadT';

// 价格映射，与子组件保持一致
const PRECIOS = {
  contabilidad: {
    noAgregar: 0,
    basico: 6615,
    ligero: 8610,
    profesional: 10900,
    premium: 15600,
    corporativo: 31350,
    incrementoDeCinco: 15510,
  },
};

const getIncrementPrice = (count) => {
  return PRECIOS.contabilidad.corporativo + PRECIOS.contabilidad.incrementoDeCinco * count;
};

export default function Tradicional() {
  // 存储选中的会计选项标识，初始值为"noAgregar"
  const [selectedContabilidad, setSelectedContabilidad] = useState('noAgregar');

  // 处理会计选项变化
  const handleContabilidadChange = (option) => {
    setSelectedContabilidad(option);
  };

  // 获取会计模块的当前价格
  const getContabilidadPrice = () => {
    switch(selectedContabilidad) {
      case 'noAgregar':
        return PRECIOS.contabilidad.noAgregar;
      case 'basico':
        return PRECIOS.contabilidad.basico;
      case 'ligero':
        return PRECIOS.contabilidad.ligero;
      case 'profesional':
        return PRECIOS.contabilidad.profesional;
      case 'premium':
        return PRECIOS.contabilidad.premium;
      case 'corporativo':
        return PRECIOS.contabilidad.corporativo;
      default:
        if (selectedContabilidad.startsWith('increment')) {
          const count = parseInt(selectedContabilidad.replace('increment', ''));
          return getIncrementPrice(count);
        }
        return 0;
    }
  };

  // 计算总价（这里补充其他模块的价格获取逻辑，示例中先保留原结构）
  const getTotal = () => {
    const total =
      getContabilidadPrice() +
      // 其他模块价格，比如precioBancos等，需要对应添加类似的获取逻辑
      0;

    return total;
  };

  return (
    <>
      <h1>传统报价器</h1>
      {/* <Titulos /> 确保这个组件已定义或移除 */}
      <ContabilidadT
        selectedContabilidad={selectedContabilidad}
        onContabilidadChange={handleContabilidadChange}
      />

      <div>
        <h2>总计</h2>
        <h3>
          {new Intl.NumberFormat('es-MX', {
            style: 'currency',
            currency: 'MXN',
          }).format(getTotal())}
        </h3>
        {/* 可以直接显示选中的选项名称 */}
        <p>当前选中的会计选项：{
          selectedContabilidad === 'noAgregar' ? '不添加' :
          selectedContabilidad === 'basico' ? '基础版' :
          selectedContabilidad === 'ligero' ? '轻量版' :
          selectedContabilidad === 'profesional' ? '专业版' :
          selectedContabilidad === 'premium' ? '高级版' :
          selectedContabilidad === 'corporativo' ? '企业版' :
          selectedContabilidad.startsWith('increment') ? `${parseInt(selectedContabilidad.replace('increment', '')) + 10}用户` :
          '未选择'
        }</p>
      </div>
    </>
  );
}

关键改进点 #

• 父组件通过selectedContabilidad状态直接记录选中的选项标识，无需操作DOM就能知道哪个单选按钮被选中
• 子组件所有单选按钮都绑定了checked属性，视图完全由状态驱动，避免了状态不一致的问题
• 价格配置抽离为常量，便于统一维护和修改
• 移除了直接操作DOM的代码，完全遵循React的状态管理模式

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