React-hook-forms中如何配置复选框返回布尔值true/false

你的代码里有几个关键问题导致复选框无法正确绑定布尔值，下面是修正后的方案：

核心问题分析 #

• 自定义的handleChange完全多余，而且错误使用handleSubmit来更新字段（handleSubmit是用来处理表单提交逻辑的，不是实时更新字段值的）
• Form.Check里硬编码checked={true / false}会覆盖React Hook Form的状态控制
• 同时传入control和register属于重复配置，二者选其一即可

修正后的完整代码 #

import { useForm } from "react-hook-form";
// 假设你用的是Bootstrap的Form组件
import { Form } from "react-bootstrap";

function YourFormComponent() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: {
      firstname: "",
      lastname: "",
      active: false, // 初始布尔值为false
    },
  });

  // 表单提交逻辑示例
  const onSubmit = (data) => {
    console.log(data); // 提交时会看到active是布尔值true/false
    // 这里写你的提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 其他表单字段... */}
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check
          name="active"
          type="checkbox"
          label="Active"
          {...register("active")} // 只需要这一行就够了，自动处理布尔值绑定
        />
      </Form.Group>

      <button type="submit">提交</button>
    </form>
  );
}

关键说明 #

• React Hook Form的register会自动处理复选框的状态：勾选时active字段自动设为true，取消勾选设为false，完全匹配你的需求
• 不需要手动设置checked属性，register会根据表单状态自动控制
• 如果你需要手动控制active的值，可以使用setValue方法，比如：setValue("active", true)

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