Formik表单中Material UI单选按钮组重置失效如何解决？

问题描述：调用formik.resetForm()后，表单值能正确重置为空，但Material UI的单选按钮组仍显示最后选中的选项处于选中状态，需实现提交表单后单选按钮组也能正确重置。

原因分析 #

当前代码中，RadioGroup组件未绑定Formik管理的value，导致Formik内部表单值重置后，组件的选中状态未同步更新。

解决方案 #

给RadioGroup添加value属性，绑定Formik的formik.values.winner，让组件选中状态与Formik表单值双向同步，触发resetForm()时即可同步重置单选按钮组状态。

修改后的完整代码：

import { useFormik } from "formik";
import {
  Stack,
  Button,
  FormControl,
  FormControlLabel,
  FormHelperText,
  FormLabel,
  Radio,
  RadioGroup,
} from "@mui/material";

export default function App() {
  const players = ["player 1", "player 2"];
  const formik = useFormik({
    initialValues: {
      winner: "",
    },
    onSubmit: (values, { resetForm }) => {
      resetForm();
    },
  });
  return (
    <div className="App">
      <h1>Demo Radio Group Reset</h1>
      <h2>
        点击Save后，表单将被重置，单选按钮组现在能正确同步重置状态。
      </h2>
      <p>value: {formik.values.winner || "<empty>"}</p>
      <form onSubmit={formik.handleSubmit}>
        <Stack>
          <FormControl
            required
            error={formik.touched.winner && Boolean(formik.errors.winner)}
          >
            <FormLabel sx={{ textAlign: "left" }}>Winner</FormLabel>
            <RadioGroup
              row
              name="winner"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value={formik.values.winner} {/* 新增value绑定 */}
            >
              {players.map((player) => (
                <FormControlLabel
                  key={player}
                  value={player}
                  control={<Radio />}
                  label={player}
                />
              ))}
            </RadioGroup>
            <FormHelperText>
              {formik.touched.winner && formik.errors.winner}
            </FormHelperText>
          </FormControl>
          <Button variant="contained" type="submit">
            Save
          </Button>
        </Stack>
      </form>
    </div>
  );
}

关键修改点 #

• 在RadioGroup组件中添加value={formik.values.winner}，实现组件选中状态与Formik表单值的双向绑定。当resetForm()将winner重置为空字符串时，RadioGroup会自动取消所有选项的选中状态。

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