React中如何获取Radio组件对应的对象名称与值？

问题场景 #

在React项目中定义了包含多个属性的location状态对象，使用FormControlLabel与Radio组件构建选项，希望在handleChange函数中获取Radio的name和value来更新状态，但当前代码无法正确更新location状态。

当前代码 #

状态与处理函数 #

const [location, setLocation] = React.useState({
  lifeLabs: "",
  gamma: "",
  hamilton: "",
  joseph: "",
  other:"",
});

const handleChange = (e) => {
  const { location } = e.target;
  setLocation(location);
};

组件渲染代码 #

<FormControlLabel
  value="Life Labs"
  name="lifeLabs"
  control={<Radio onChange={handleChange} />}
  label="Life Labs"
/>
<FormControlLabel
  value="Gamma"
  name="gamma"
  control={<Radio onChange={handleChange} />}
  label="Gamma Dyna-care"
/>
<FormControlLabel
  value="Hamilton"
  name="hamilton"
  control={<Radio onChange={handleChange} />}
  label="Hamilton Health Science"
/>
<FormControlLabel
  value="Joseph"
  name="joseph"
  control={<Radio onChange={handleChange} />}
  label="St Joseph"
/>
<FormControlLabel
  value="Other"
  name="other"
  control={<Radio onChange={handleChange} />}
  label="Other"
/>

问题根源 #

1. handleChange中错误尝试从e.target获取不存在的location属性，实际应提取name和value
2. 更新状态时直接替换整个对象，未保留原状态的其他属性，导致状态丢失
3. 未使用RadioGroup包裹选项，无法实现Radio组件默认的单选互斥逻辑（若需求为单选）

解决方案 #

方案1：单选场景（推荐，符合Radio组件设计） #

使用RadioGroup统一管理选项，确保单选互斥，同时正确更新状态：

1. 调整处理函数

const handleChange = (e) => {
  const { name, value } = e.target;
  // 清空所有属性后，设置当前选中项的值
  setLocation({
    lifeLabs: "",
    gamma: "",
    hamilton: "",
    joseph: "",
    other: "",
    [name]: value
  });
};

2. 调整渲染代码（用RadioGroup包裹）

// 需先导入FormControl和RadioGroup组件
import { FormControl, RadioGroup, FormControlLabel, Radio } from '@mui/material';

<FormControl component="fieldset">
  <RadioGroup onChange={handleChange}>
    <FormControlLabel
      value="Life Labs"
      name="lifeLabs"
      control={<Radio />}
      label="Life Labs"
    />
    <FormControlLabel
      value="Gamma"
      name="gamma"
      control={<Radio />}
      label="Gamma Dyna-care"
    />
    <FormControlLabel
      value="Hamilton"
      name="hamilton"
      control={<Radio />}
      label="Hamilton Health Science"
    />
    <FormControlLabel
      value="Joseph"
      name="joseph"
      control={<Radio />}
      label="St Joseph"
    />
    <FormControlLabel
      value="Other"
      name="other"
      control={<Radio />}
      label="Other"
    />
  </RadioGroup>
</FormControl>

方案2：多选场景（建议改用Checkbox，Radio不适合多选） #

若确实需要多选功能，修改handleChange实现属性值的切换：

const handleChange = (e) => {
  const { name, value } = e.target;
  setLocation(prev => ({
    ...prev,
    // 切换当前属性的值：已选中则清空，未选中则设置为value
    [name]: prev[name] === value ? "" : value
  }));
};

渲染代码保留原结构即可，但更推荐将Radio替换为Checkbox以符合用户交互预期。

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