React Hook Form复选框组未选中提交值为false的解决方法

问题背景 #

我基于React Hook Form开发了CheckboxGroup组件，代码如下：

const CheckboxGroup = (props) => {
    return (
        <div>
            {props.options.map(option => (
                <input 
                    id={option.id}
                    type="checkbox"
                    value={option.value}
                    {...register("my-checkbox")}
                />
            ))}
        </div>
    )
}

配套的Yup验证规则：

{
    'my-checkbox': yup.array().notRequired()
}

整体表单代码：

import { useForm, FormProvider } from "react-hook-form"

const MyForm = () => {
   const formMethods = useForm()
   const { handleSubmit } = formMethods

   const onSubmit = (data) => console.log(data)

    return (
        <FormProvider>
            <form onSubmit={handleSubmit(onSubmit)}>
                <CheckboxGroup />
            </form>
        </FormProvider>
    )
}

实际使用中发现异常：

• 初始未选中任何选项提交时，my-checkbox的值为false：{ 'my-checkbox': false }
• 选中选项时，值为数组：{ 'my-checkbox': ['Option selected'] }
• 选中后取消选项，值为空数组：{ 'my-checkbox': [] }

初始提交的false值导致Yup数组验证失效，需要解决以下任一需求：

1. 让未选中时始终提交空数组
2. 修改Yup验证规则兼容false值

解决方案一：统一提交值为数组类型 #

通过设置表单默认值+setValueAs转换，确保my-checkbox的值始终是数组：

1. 修改表单初始化逻辑 #

在useForm中设置my-checkbox的默认值为空数组，同时把formMethods传入FormProvider（原代码遗漏了这一步）：

const MyForm = () => {
   const formMethods = useForm({
     defaultValues: {
       'my-checkbox': []
     }
   })
   const { handleSubmit, register } = formMethods

   const onSubmit = (data) => console.log(data)

    return (
        <FormProvider {...formMethods}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <CheckboxGroup register={register} />
            </form>
        </FormProvider>
    )
}

2. 优化CheckboxGroup组件 #

给register添加setValueAs属性，将非数组值（比如false）转换为空数组：

const CheckboxGroup = ({ register, options }) => {
    return (
        <div>
            {options.map(option => (
                <input 
                    key={option.id}
                    id={option.id}
                    type="checkbox"
                    value={option.value}
                    {...register("my-checkbox", {
                      setValueAs: (value) => Array.isArray(value) ? value : []
                    })}
                />
            ))}
        </div>
    )
}

修改后，无论初始未选还是取消选中，my-checkbox的值都会是空数组，完全匹配Yup的数组验证规则。

解决方案二：修改Yup规则兼容false值 #

如果不想调整表单逻辑，可以直接修改验证规则，允许false或空数组通过验证：

写法一：自定义测试规则 #

{
    'my-checkbox': yup.mixed().test(
      'valid-checkbox-value',
      '值不符合要求',
      (value) => value === false || Array.isArray(value)
    ).notRequired()
}

写法二：用oneOf简化规则 #

{
    'my-checkbox': yup.mixed().oneOf([false, yup.array()]).notRequired()
}

两种写法都能让初始提交的false值通过验证，同时兼容选中后的数组值。

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