react-hook-form搭配Material UI如何将多个Checkbox绑定到同一数组？

在react-hook-form中没有Formik那样同name自动合并多选值的内置能力，你可以通过手动处理数组的方式实现需求，修改逻辑如下：

1. 初始化表单时给目标数组字段设置空数组默认值
2. 所有Checkbox共用同一个Controller的name属性，统一绑定到checkboxFieldName
3. 手动处理选中/取消选中时的数组增删逻辑
4. 用当前选项值是否存在于数组中来判断Checkbox的选中状态

修改后的完整代码如下：

import { useForm, Controller } from 'react-hook-form';
import { FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Button } from '@mui/material';

const options = [
  { key: 'option1', label: 'Option 1', val: 'option1' },
  { key: 'option2', label: 'Option 2', val: 'option2' },
  { key: 'option3', label: 'Option 3', val: 'option3' },
]

function App() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      checkboxFieldName: [] // 初始化空数组作为默认值
    }
  });
  const onSubmit = data => console.log(data); // 输出结构为 {checkboxFieldName: ['option1', 'option3']}

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormControl>
        <FormLabel>Check all suitable options</FormLabel>
        <FormGroup>
          {options.map((option) => (
            <FormControlLabel
              key={option.key}
              control={
                <Controller
                  control={control}
                  name="checkboxFieldName" // 所有Checkbox绑定同一个字段名
                  render={({ field: { onChange, value = [] }}) => (  
                    <Checkbox
                      checked={value.includes(option.val)} // 判断当前选项是否在数组中
                      onChange={(e) => {
                        if (e.target.checked) {
                          // 选中时追加值到数组
                          onChange([...value, option.val])
                        } else {
                          // 取消选中时过滤掉当前值
                          onChange(value.filter(item => item !== option.val))
                        }
                      }}
                    />
                  )}
                />
              }
              label={option.label}
            />
          ))}
        </FormGroup>
      </FormControl>
      <Button type="submit">Save</Button>
    </form>
  );
}

如果需要避免重复添加相同选项，也可以在追加值的时候增加去重判断。

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