React使用MUI RadioGroup时如何在onChange中同时获取选中项的label与value

你可以通过以下两种方式实现需求，无需大幅改动现有代码：

方案1：通过选中value匹配原始数组（无需修改现有JSX结构） #

核心逻辑是利用onChange返回的选中value，遍历你的原始单选选项数组state.AM_timelogs_IN匹配对应项，直接取出label值，修改后的onChange代码如下：

const onChangeRadioAMIN = (event, value) => {   
  event.persist();
  // 匹配当前选中的选项
  const selectedOption = state.AM_timelogs_IN?.find(
    item => item.time_check.split(',')[1].slice(1) === value
  )
  // 即可获取到对应label和其他自定义字段
  const selectedLabel = selectedOption?.time_standard
  const selectedValue = value
  // 可根据需求把label也存入state
  setState((prev) => ({
    ...prev,
    AM_time_in_value: value,
    // AM_time_in_label: selectedLabel
  }));
}

该方案适合选项数量不多的场景，无需调整现有渲染逻辑，改造成本最低。

方案2：通过自定义data属性存储label（性能更优） #

如果你的选项数量较多，可以把label值绑定到FormControlLabel的自定义data属性上，直接从事件对象中读取，无需遍历数组：

1. 先修改渲染部分的FormControlLabel代码，新增data-label属性：

<FormControlLabel 
  value={radio.time_check.split(',')[1].slice(1)} 
  control={<Radio size="small" />} 
  label={radio.time_standard} 
  item={radio}
  data-label={radio.time_standard} // 新增该行存储label
/>

2. 再修改onChange代码直接从事件中取label：

const onChangeRadioAMIN = (event, value) => {   
  event.persist();
  const selectedLabel = event.target.getAttribute('data-label')
  const selectedValue = value
  setState((prev) => ({
    ...prev,
    AM_time_in_value: value,
  }));
}

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