ReactJS+Material UI：如何根据RadioGroup选择控制TextField的隐藏/禁用

问题根源 #

你的代码存在几个关键问题导致状态切换失效：

• 直接用document.getElementById操作DOM，违背React状态驱动UI的核心原则，无法通过数据流同步状态。
• MyTextField硬编码disabled={true}，覆盖了动态控制逻辑；且错误使用checked属性，TextField的禁用状态需由disabled属性控制。
• 依赖useRadioGroup获取选中值不够直观，且未正确映射到TextField的禁用属性上。

修正后的实现方案 #

用React的useState管理用户类型选中状态，直接通过状态值控制目标TextField的禁用/启用，同时简化MUI组件使用：

import { useState } from 'react';
import { Grid, FormLabel, RadioGroup, FormControlLabel, Radio, TextField } from '@mui/material';

function SignUp(props) {
  // 用状态管理选中的用户类型，初始默认Patient
  const [userType, setUserType] = useState("Patient");

  // 处理单选按钮切换事件
  const handleUserTypeChange = (e) => {
    setUserType(e.target.value);
  };

  // 选中Doctor时禁用患者专属字段
  const shouldDisablePatientFields = userType === "Doctor";

  return (
    <>
      <Grid item xs={12} style={{ textAlign: "left" }}>
        <FormLabel id="typeOfLabel">Type Of User</FormLabel>
        {/* 绑定状态与切换事件 */}
        <RadioGroup 
          row 
          aria-labelledby="typeOfLabel" 
          name="typeofuser"
          value={userType}
          onChange={handleUserTypeChange}
        >
          <FormControlLabel
            value="Patient"
            control={<Radio />}
            label="Patient"
          />
          <FormControlLabel
            value="Doctor"
            control={<Radio />}
            label="Health Care Provider"
          />
        </RadioGroup>
      </Grid>

      <Grid item xs={12}>
        <TextField
          disabled={shouldDisablePatientFields}
          required={!shouldDisablePatientFields} {/* 选中Doctor时取消必填 */}
          fullWidth
          name="BloodGroup"
          label="BloodGroup"
          id="Blood Group"
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          required
          fullWidth
          name="Contactinfo"
          label="Contactinfo"
          type="email"
          id="Contact info"
          autoComplete="emailaddress"
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          disabled={shouldDisablePatientFields}
          required={!shouldDisablePatientFields}
          fullWidth
          name="Emergencycontact"
          label="Emergencycontact"
          type="email"
          id="Emergencycontact"
          autoComplete="Emergencycontact"
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          disabled={shouldDisablePatientFields}
          required={!shouldDisablePatientFields}
          fullWidth
          name="Familydoctor"
          label="Familydoctor"
          type="email"
          id="Family doctor"
          autoComplete="Familydoctor"
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          required
          fullWidth
          name="password"
          label="Password"
          type="password"
          id="password"
          autoComplete="new-password"
        />
      </Grid>
    </>
  );
}

关键修改点说明 #

1. 状态管理：用useState创建userType状态，统一管理单选按钮选中值，这是React控制UI的标准方式。
2. 事件绑定：给RadioGroup添加onChange事件，切换单选按钮时更新状态。
3. 动态控制：通过shouldDisablePatientFields变量，根据选中的用户类型动态设置TextField的disabled属性。
4. 优化验证：选中Doctor时自动取消字段的required属性，避免表单验证报错。
5. 简化组件：移除冗余的自定义组件，直接使用MUI原生组件，减少代码复杂度。

扩展：隐藏字段而非禁用 #

如果需求是隐藏字段，可使用条件渲染：

{userType === "Patient" && (
  <>
    <Grid item xs={12}>
      {/* BloodGroup TextField */}
    </Grid>
    <Grid item xs={12}>
      {/* Emergencycontact TextField */}
    </Grid>
    <Grid item xs={12}>
      {/* Familydoctor TextField */}
    </Grid>
  </>
)}

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