Material-UI Checkbox结合react-hook-form V7：逻辑修改选中状态后提交值异常问题

你遇到的问题核心在于React Hook Form v7中register的工作方式变化，以及自定义受控组件（Material-UI Checkbox）和RHF表单状态的同步问题。v7的register会让组件受控于RHF内部的表单状态，但你现在手动维护了isChecked状态，并且没有将外部逻辑触发的状态变化同步到RHF的表单存储中，导致自动勾选时RHF仍认为值是false。

解决方案：使用Controller替代register #

对于Material-UI这类自定义受控组件，尤其是需要外部逻辑控制状态的场景，RHF推荐使用Controller来处理表单状态的双向绑定，它能更好地协调外部状态和RHF内部状态。

修改后的完整代码 #

import React, { useContext, useEffect } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { Controller } from "react-hook-form";
import { makeStyles } from "@material-ui/core/styles";
import { DarkThemeContext } from "../../context/DarkThemeContext";
import { useStylesSelectPropDetails } from "../../styledComponent/SelectPropDetailsStyled";
import { IMAGES_LINK } from "../../api/doFetch";

const useStylesLabel = makeStyles((theme) => ({
  label: {
    fontSize: "1em",
    fontFamily: "Open Sans Hebrew, sans-serif !important",
    fontWeight: 400,
    lineHeight: 1.5,
  },
}));

// 注意：现在需要传入control（从useForm返回的control），而不是register
const CheckboxPropDetails = ({ control, name, label, checked, isShelter, isElevator }) => {
  const classesLabel = useStylesLabel();
  const [isDarkTheme] = useContext(DarkThemeContext);
  const props = { isDarkTheme: isDarkTheme };
  const classes = useStylesSelectPropDetails(props);

  useEffect(() => {
    // 当外部条件变化时，更新RHF的表单状态
    if (name === "shelter") {
      control.setValue(name, isShelter);
    }
    if (name === "elevator") {
      control.setValue(name, isElevator);
    }
  }, [control, name, isShelter, isElevator]);

  return (
    <>
      <FormControlLabel
        classes={classesLabel}
        control={
          <Controller
            name={name}
            control={control}
            defaultValue={checked || false}
            render={({ field }) => (
              <Checkbox
                {...field}
                color="primary"
                size="medium"
                icon={
                  <img
                    src={`${IMAGES_LINK}/dashboard/elements/rec.svg`}
                    alt="Circle"
                    style={{ width: 20, height: 20 }}
                  />
                }
                disableRipple
                checkedIcon={
                  <FontAwesomeIcon
                    icon={faCheckCircle}
                    style={{ width: 20, height: 20 }}
                  />
                }
                // 用field.value控制选中状态，field.onChange处理变化
                checked={field.value}
                onChange={(e) => field.onChange(e.target.checked)}
              />
            )}
          />
        }
        labelPlacement="end"
        label={<p className={classes.paragraphAddProp}>{label}</p>}
      />
    </>
  );
};

export default CheckboxPropDetails;

关键修改点说明 #

• 替换register为Controller：
  Controller是RHF专门为自定义受控组件设计的API，它会接管组件的状态管理，确保外部逻辑和表单状态同步。需要将父组件中从useForm返回的control作为props传入，替代原来的register。
• 移除手动维护的isChecked状态：
  不再需要自己的isChecked state，直接使用Controller提供的field.value来控制Checkbox的选中状态，这样RHF的内部状态和组件显示完全一致。
• 同步外部逻辑到表单状态：
  在useEffect中，当isShelter或isElevator变化时，调用control.setValue(name, value)直接更新RHF的表单状态，这样自动勾选的状态会被RHF正确记录。
• 调整Checkbox的事件绑定：
  将Checkbox的onChange绑定到field.onChange，并传入e.target.checked，确保用户手动操作时也能同步更新RHF的状态。

为什么原来的v6代码能工作？ #

v6中inputRef={register}是通过DOM ref来获取表单元素的值，不受组件自身checked属性的影响，所以即使你手动维护isChecked，RHF仍能通过ref读取到正确的DOM状态。但v7的register改为了受控模式，组件的状态必须和RHF的内部状态同步，否则就会出现值不匹配的问题。

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