React中实现数组列表内radio单选按钮的互斥选中与自动取消选中功能

问题根因 #

你当前的Radio组件没有绑定统一的选中状态，也没有归属到同一个单选分组，同时存在多个同名selectedPlan的Form.Item，不符合AntD表单组件的使用规范，因此无法触发自动互斥效果。

实现步骤 #

方案1：使用AntD Radio.Group（推荐，符合组件规范） #

1. 把循环渲染卡片的外层包裹同一个Radio.Group，绑定到Form的selectedPlan字段，统一管理选中值
2. 移除每个卡片内部重复的Form.Item，统一放在Radio.Group外层
3. 每个卡片内的Radio只需要设置value为当前卡片对象即可，无需单独绑定onChange和checked

外层循环部分修改示例：

// 你原来渲染卡片列表的位置改成如下
<Form.Item name="selectedPlan">
  <Radio.Group 
    value={selectedPlan} 
    onChange={(e) => setSelectedPlan(e.target.value)}
  >
    <Row gutter={16}>
      {cardList.map((card, index) => renderCard(card, index))}
    </Row>
  </Radio.Group>
</Form.Item>

renderCard函数修改示例：

const renderCard = (card, index) => {
  return (
    <Col span={7} className="card-background">
      <h3 style={{ textAlign: "center" }}>{card.planType}</h3>
      <hr />
      <Row>
        <Col span={16} offset={2}>
          {card.planDetails[0].name}
        </Col>
        <Col span={5} offset={1}>
          {card.planDetails[0].numOfSession}
        </Col>
        <Col span={16} offset={2}>
          {card.planDetails[1].name}
        </Col>
        <Col span={5} offset={1}>
          {card.planDetails[1].numOfSession}
        </Col>
        <Col span={16} offset={2}>
          {card.planDetails[2].name}
        </Col>
        <Col span={5} offset={1}>
          {card.planDetails[2].numOfSession}
        </Col>
      </Row>
      <hr />
      <div style={{ textAlign: "center" }}>
        <Radio value={card}>
          Pay {card.planAmount}
        </Radio>
      </div>
    </Col>
  );
};

方案2：手动绑定checked属性 #

如果不想改结构，也可以直接给每个Radio绑定checked属性，和全局的selectedPlan状态做对比即可实现互斥：

// 仅修改Radio部分代码即可
<Radio
  checked={selectedPlan?.planType === card.planType} // 建议用card的唯一id做对比更稳妥，比如selectedPlan?.id === card.id
  onChange={() => setSelectedPlan(card)}
>
  Pay {card.planAmount}
</Radio>

注意：该方案需要保证你用来对比的字段（比如planType、id）是卡片列表里唯一的值，避免判断错误。

额外说明 #

修改后你可以直接通过Form的handlesubmit拿到选中的selectedPlan值，不需要额外处理表单同步逻辑。

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