如何设置Material-UI中RadioGroup的默认选中值以保留用户历史选择

你使用的是Material UI组件库，RadioGroup本身支持受控模式，只需要补全绑定逻辑即可实现选项回显，具体操作如下：

1. 确定用户选项的存储方式 #

用户提交选项后，你需要将选择结果持久化存储，常用两种方案：

• 提交到后端数据库，用户重新进入页面时调用接口拉取之前的选择结果，适合需要跨设备同步的场景
• 临时存储在浏览器localStorage中，适合仅需要当前设备留存记录的场景

2. 给RadioGroup绑定value属性 #

RadioGroup的value属性控制当前选中的选项值，只需要将你拿到的历史选择值赋值给这个属性，即可自动回显高亮对应选项。

3. 状态适配修改 #

如果你的项目是React技术栈，建议将formData改为响应式状态（比如useState），避免直接修改对象导致视图不更新。

修改后代码示例（React+localStorage版本） #

import { useState, useEffect } from 'react'
import { FormControl, RadioGroup, FormControlLabel, Radio } from '@mui/material'

function YourComponent() {
  // 初始化状态，优先从localStorage取历史值，没有则为空
  const [selectedVal, setSelectedVal] = useState(() => {
    return localStorage.getItem('KPI_5_S') || ''
  })

  const handleChange = (event) => {
    const val = event.target.value
    setSelectedVal(val)
    // 实时存储选项，也可以等到用户点击提交按钮时统一存储
    localStorage.setItem('KPI_5_S', val)
  }

  return (
    <FormControl component="fieldset">
      <RadioGroup 
        value={selectedVal} // *核心属性：绑定当前选中值，回显完全依赖该属性*
        onChange={handleChange} 
        aria-label="status" 
        name="row-radio-buttons-group"
      >
        <FormControlLabel value="Finished with respect to requirements" control={<Radio />} label="Finished with respect to requirements" />
        <FormControlLabel value="In progress" control={<Radio />} label="In progress" />
        <FormControlLabel value="Yet to start" control={<Radio />} label="Yet to start" />
        <FormControlLabel value="Failed to get the expected result" control={<Radio />} label="Failed to get the expected result" />
      </RadioGroup>
    </FormControl>
  )
}

从后端接口拉取历史值的适配逻辑 #

如果选择记录存在后端，只需要在组件初始化时请求接口赋值即可：

useEffect(() => {
  // 调用接口拉取用户之前提交的表单数据
  fetchUserFormData().then(res => {
    setSelectedVal(res.KPI_5_S || '')
  })
}, [])

注意事项 #

• 确保存储的历史值和Radio选项的value属性值完全匹配（字符串大小写、空格都要一致），否则无法正确回显
• 如果formData是全局状态管理（比如Redux、Zustand），直接将RadioGroup的value绑定到对应全局状态字段即可，逻辑和上面一致

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