React：如何根据Radio Button选择切换显示对应控件？

原代码问题梳理 #

• 所有单选按钮共用同一个id="html"，不符合DOM规范
• 第一个mobile单选按钮的value绑定错误，且onChange未正确获取选中值
• 未通过状态控制手机号下拉框和邮箱输入框的显示/隐藏

修正后的实现代码 #

import React, { useState } from 'react'

const App = () => {
  // 初始化选中状态，默认无选中项
  const [selected, setSelected] = useState('')

  // 处理单选按钮变更事件
  const handleRadioChange = (e) => {
    setSelected(e.target.value)
  }

  return (
    <div className="App">
      <form id="custReviewForm">
        {/* Mobile单选按钮 */}
        <input 
          type="radio" 
          id="optMobile" 
          name="options" 
          value="optMobile"
          onChange={handleRadioChange}
          checked={selected === "optMobile"}
        />
        mobile:
        {/* 仅当选中mobile时显示下拉框 */}
        {selected === "optMobile" && (
          <>
            <br />
            <select name="phoneno" id="phonenumber">
              <option>111-111-1111</option>
              <option>222-222-2222</option>
              <option>333-333-3333</option>
              <option>444-444-4444</option>
            </select>
            <br /><br />
          </>
        )}

        {/* Email单选按钮 */}
        <input 
          type="radio" 
          id="optEmail" 
          name="options" 
          value="optEmail"
          onChange={handleRadioChange}
          checked={selected === "optEmail"}
        />
        Email:
        {/* 仅当选中Email时显示输入框 */}
        {selected === "optEmail" && (
          <>
            <br />
            <input type="text" id="txtEmail" placeholder="请输入邮箱"/>
            <br /><br />
          </>
        )}

        {/* 其他单选按钮 */}
        <input 
          type="radio" 
          id="optCode" 
          name="options" 
          value="optCode"
          onChange={handleRadioChange}
          checked={selected === "optCode"}
        />
        code
        <br />
        <input 
          type="radio" 
          id="optAddress" 
          name="options" 
          value="optAddress"
          onChange={handleRadioChange}
          checked={selected === "optAddress"}
        />
        address
        <br />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default App;

关键实现说明 #

• 状态管理：通过useState创建selected状态，存储当前选中的单选按钮值
• 事件绑定：所有单选按钮共用handleRadioChange事件，更新选中状态
• 条件渲染：使用&&逻辑运算符，仅当selected匹配对应值时，渲染对应的下拉框或输入框
• 单选按钮规范：每个单选按钮设置唯一id，并通过checked属性绑定状态，确保选中状态正确同步

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