使用react-hook-form的reset方法时Material-UI Checkbox未重置问题

这是react-hook-form 7.x与Material UI 4.x Checkbox组件配合时的典型状态同步问题，核心诱因有两点：

1. MUI Checkbox属于封装后的非原生输入组件，无法直接适配react-hook-form的register方法返回的属性。register默认绑定的是value属性，而受控模式下的Checkbox依赖checked属性判断选中状态，二者没有对齐就会出现内部表单状态与UI显示不一致的情况。
2. 调用reset方法时没有匹配表单初始默认值规则：如果useForm初始化时未在defaultValues中给对应Checkbox字段设置初始false值，reset只会更新react-hook-form内部的状态，不会触发MUI Checkbox的UI重渲染。

• 使用Controller组件包裹Checkbox，手动绑定checked属性

import { Controller, useForm } from 'react-hook-form';
import { Checkbox, FormControlLabel } from '@material-ui/core';

// 表单内Checkbox的正确写法
<Controller
  name="checkbox字段名"
  control={control}
  render={({ field }) => (
    <FormControlLabel
      control={<Checkbox {...field} checked={!!field.value} />}
      label="选项描述"
    />
  )}
/>

• 初始化useForm时传入完整的默认值配置，给所有Checkbox字段显式设置初始值

const { control, reset } = useForm({
  defaultValues: {
    agree: false,
    notice: false,
    // 其他表单字段的初始值
  }
});

• 按需调整reset的调用参数
  如果只需要重置部分Checkbox字段、保留其他字段的当前值，可以按如下方式调用：

reset(
  {
    agree: false,
    notice: false
  },
  {
    keepValues: true // 保留未在第一个参数中声明的字段的当前值
  }
);

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