React JS中react-hook-form无法为Checkbox设置焦点问题排查

问题描述 #

使用React Hook Form构建表单时，点击按钮调用setFocus("inputCheckbox")尝试为复选框设置焦点，但无法生效。相关代码如下：

import "./styles.css";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, setFocus, handleSubmit } = useForm({
    defaultValues: { inputText: "", inputCheckbox: false }
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)} className="form">
        <br />
        <label>inputCheckbox</label>
        <input type="checkbox" {...register("inputCheckbox")} />
        <br />
        <br />
        <label>inputCheckbox2</label>
        <input type="checkbox" {...register("inputCheckbox")} />

        <button
          onClick={() => {
            setFocus("inputCheckbox");
          }}
        >
          setFocus inputCheckbox
        </button>

        <br />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

问题原因 #

• 两个复选框都注册了同一个字段名inputCheckbox，React Hook Form无法识别要聚焦的具体DOM元素，导致setFocus操作失效。
• 当多个表单元素绑定到同一字段名时，库无法定位唯一目标，聚焦逻辑无法正常执行。

解决方法 #

方案1：为每个复选框分配独立字段名 #

给每个复选框设置唯一的字段名，让setFocus可以精准定位到目标元素：

import "./styles.css";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, setFocus, handleSubmit } = useForm({
    defaultValues: { inputText: "", inputCheckbox: false, inputCheckbox2: false }
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)} className="form">
        <br />
        <label>inputCheckbox</label>
        <input type="checkbox" {...register("inputCheckbox")} />
        <br />
        <br />
        <label>inputCheckbox2</label>
        <input type="checkbox" {...register("inputCheckbox2")} />

        <button
          onClick={() => {
            setFocus("inputCheckbox");
          }}
        >
          setFocus inputCheckbox
        </button>

        <br />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

方案2：手动使用Ref控制聚焦（保留同名字段场景） #

如果业务需要多个复选框绑定同一字段名（比如收集多选值为数组），可以通过React的useRef手动管理聚焦：

import "./styles.css";
import { useForm } from "react-hook-form";
import { useRef } from "react";

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: { inputCheckbox: [] }
  });
  const targetCheckboxRef = useRef(null);

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)} className="form">
        <br />
        <label>inputCheckbox</label>
        <input 
          type="checkbox" 
          {...register("inputCheckbox")} 
          ref={targetCheckboxRef}
        />
        <br />
        <br />
        <label>inputCheckbox2</label>
        <input type="checkbox" {...register("inputCheckbox")} />

        <button
          onClick={() => {
            targetCheckboxRef.current?.focus();
          }}
        >
          setFocus inputCheckbox
        </button>

        <br />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

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