React多阶段表单搭配Formik使用switch开关无法保存选中状态如何解决

你当前的写法没有将switch开关和Formik的全局状态池绑定，而是单独维护了组件内部状态，多阶段表单切换时组件重新挂载/重置就会丢失选中状态，Formik对接switch开关没有特殊规范，只要符合Formik的状态绑定规则即可。

• 移除你自定义的diff_company局部状态和onChangeCompany处理函数，直接复用Formik内置的状态和方法，避免双源状态不同步
• 将<Form.Check>的name属性修改为和Formik初始化时定义的字段名完全一致，你当前写的name="company"和初始化的diff_company不匹配，会导致状态无法对应
• 给switch显式绑定checked属性为Formik中的对应字段值，开关类组件必须绑定checked而非value才能正确同步选中状态

Formik初始化部分 #

如果用withFormik HOC无需修改原来的mapPropsToValues即可，以下为useFormik钩子写法示例：

const formik = useFormik({
  initialValues: {
    owner: "",
    diff_company: false,
    Company: "",
    location: "",
    // 其余原有字段保持不变
  },
  // 原有验证、提交逻辑保持不变
})

开关组件部分 #

<Col md={{ span: 3, offset: 1 }}>
     <Form.Check 
       type="switch"
       label="Different Company"
       name="diff_company"
       checked={formik.values.diff_company}
       onChange={formik.handleChange}
     />
  </Col>

如果需要在切换开关时执行额外自定义逻辑，可修改onChange写法：

onChange={(e) => {
  formik.setFieldValue('diff_company', e.target.checked)
  // 自定义业务逻辑写在此处
}}

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