如何搭配Formik使用Material UI的Checkbox组件

MUI Checkbox 选中状态通过checked属性而非value属性控制，只需要按照以下规则绑定即可实现和formik.values的实时同步：

基础单选Checkbox实现 #

代码示例 #

import { useFormik } from 'formik';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      // 提前声明对应字段，初始值为布尔类型
      acceptAgreement: false,
    },
    onSubmit: (values) => {
      console.log('提交的表单值：', values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <FormControlLabel
        control={
          <Checkbox
            // 绑定formik对应字段的值控制选中状态
            checked={formik.values.acceptAgreement}
            // 绑定formik默认事件处理函数
            onChange={formik.handleChange}
            // name属性必须和formik声明的字段名完全一致
            name="acceptAgreement"
          />
        }
        label="我同意用户协议"
      />
      <button type="submit">提交</button>
    </form>
  );
};

常见问题排查 #

• 确保initialValues中提前声明了对应Checkbox的字段，初始值设为true/false布尔类型，不要使用字符串'0'/'1'等格式
• Checkbox的name属性必须和Formik里的字段名完全匹配，大小写敏感
• 不要用value属性控制Checkbox选中状态，MUI的value属性仅用于多选组批量取值场景

多选Checkbox组实现（多个选项对应同一个数组字段） #

如果是多个Checkbox同属一个字段，选中值存入数组的场景，可以参考以下实现：

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      // 多选字段初始值为空数组
      hobbies: []
    },
    onSubmit: (values) => console.log(values)
  })

  // 可选项配置
  const hobbyOptions = [
    { label: '看书', value: 'reading' },
    { label: '运动', value: 'sports' },
    { label: '追剧', value: 'tv' }
  ]

  return (
    <form onSubmit={formik.handleSubmit}>
      {hobbyOptions.map(option => (
        <FormControlLabel
          key={option.value}
          control={
            <Checkbox
              checked={formik.values.hobbies.includes(option.value)}
              onChange={(e) => {
                const { checked, value } = e.target;
                if (checked) {
                  formik.setFieldValue('hobbies', [...formik.values.hobbies, value])
                } else {
                  formik.setFieldValue('hobbies', formik.values.hobbies.filter(item => item !== value))
                }
              }}
              name="hobbies"
              value={option.value}
            />
          }
          label={option.label}
        />
      ))}
      <button type="submit">提交</button>
    </form>
  )
}

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