React中如何根据单选按钮选中状态控制输入框显隐与支付提示展示

你已经完成了支付单选的状态绑定，不需要额外引入新的状态或第三方库，直接基于已有的payment状态做条件渲染就能实现两个需求，核心逻辑是跟着payment的取值判断对应内容的显隐：

核心实现要点 #

• 首先要确认你给两个单选按钮设置的value值：不管你之前给COD、PayPal选项绑定的是字符串'cod'/'paypal'还是其他内容，后续的判断逻辑要和这两个值完全对齐，大小写、字符不一致都会导致判断失效。
• 全程用React的声明式渲染写显隐逻辑，不要用getElementById这类原生DOM操作修改元素的display属性，避免组件重渲染时出现状态不同步的bug。

具体代码实现 #

把下面的渲染逻辑直接插到你现有支付模块的单选按钮区域之后即可：

import { useState } from 'react';
import TextField from '@mui/material/TextField';

function OrderPayment() {
  // 你已经声明的状态与绑定逻辑
  const [payment, setPayment] = useState('');

  return (
    <div className="payment-container">
      {/* 你已经写好的两个单选按钮 */}
      <div className="radio-group">
        <label>
          <input
            type="radio"
            name="paymentMethod"
            value="cod"
            checked={payment === 'cod'}
            onChange={(e) => setPayment(e.target.value)}
          />
          货到付款(COD)
        </label>
        <label style={{ marginLeft: 24 }}>
          <input
            type="radio"
            name="paymentMethod"
            value="paypal"
            checked={payment === 'paypal'}
            onChange={(e) => setPayment(e.target.value)}
          />
          PayPal
        </label>
      </div>

      {/* 交互逻辑实现部分 */}
      {/* 1. 选中PayPal时显示gcash-num输入框 */}
      {payment === 'paypal' && (
        <TextField
          id="gcash-num"
          type="number"
          label="请输入GCash账号"
          sx={{ marginTop: 16 }}
        />
      )}

      {/* 2. 选中COD时显示指定提示文本 */}
      {payment === 'cod' && (
        <p style={{ color: '#555', marginTop: 12 }}>cod is chosen for the payment option</p>
      )}
    </div>
  )
}

效果说明 #

• 初始状态下payment为空，两个区域都不会渲染，完全符合初始隐藏的要求
• 点击PayPal单选时，payment会更新为对应值，自动触发输入框的渲染，取消选中（切到其他选项）时输入框直接隐藏
• 点击COD单选时，payment会更新为对应值，自动渲染对应的提示文本，切换到其他选项时提示文本自动消失

如果需要给显隐过程加平滑过渡动画，后续可以引入内置的过渡组件包裹这两块内容，基础功能不需要额外处理。

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