如何使用Formik的resetForm/handleReset重置单选按钮？

核心问题是你的单选按钮没有正确和Formik的状态绑定，导致handleReset/resetForm无法同步更新单选按钮的选中状态。无需单独维护每个单选的state，只要按照Formik的规范绑定字段即可：

1. 正确设置初始值 #

给单选按钮对应的字段设置非选中状态的初始值（比如空字符串''或null），示例：

const initialValues = {
  // 其他文本字段
  username: '',
  email: '',
  // 单选组字段，初始为空
  userType: ''
};

2. 正确绑定单选按钮组 #

同一组单选按钮必须使用相同的name属性，并通过Formik的values判断选中状态，用handleChange处理变更：

// 单选按钮组示例
<div className="radio-group">
  <label>
    <input
      type="radio"
      name="userType"
      value="admin"
      checked={formik.values.userType === 'admin'}
      onChange={formik.handleChange}
    />
    管理员
  </label>
  <label>
    <input
      type="radio"
      name="userType"
      value="member"
      checked={formik.values.userType === 'member'}
      onChange={formik.handleChange}
    />
    普通用户
  </label>
  <label>
    <input
      type="radio"
      name="userType"
      value="guest"
      checked={formik.values.userType === 'guest'}
      onChange={formik.handleChange}
    />
    访客
  </label>
</div>

3. 提交后调用resetForm #

在提交成功的回调里调用resetForm()，Formik会自动将所有字段（包括单选组字段）重置为初始值，单选按钮自然会取消选中：

const onSubmit = async (values, { resetForm }) => {
  // 执行你的提交逻辑
  await api.submitForm(values);
  // 重置所有表单字段
  resetForm();
};

为什么之前的方法无效？ #

如果单选按钮没有绑定到Formik的values，而是用自定义state管理，Formik的重置方法无法感知这些自定义状态，导致单选按钮保持选中。只要把单选组的状态完全交给Formik管理，就能实现一键重置，不管有多少个单选按钮都不需要额外维护state。

内容的提问来源于stack exchange，提问作者Amir hossein Majidi