在react-hook-form控制器中发生错误时如何聚焦？

import React from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    // 表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单字段 */}
      <input name="username" ref={register({ required: true })} />
      {errors.username && <span>用户名不能为空</span>}
      
      {/* 其他表单字段 */}
      
      {/* 提交按钮 */}
      <button type="submit">提交</button>
    </form>
  );
}

import React, { useEffect, useRef } from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, errors } = useForm();
  const errorRef = useRef(null); // 创建一个ref用于存储错误表单字段的引用

  useEffect(() => {
    if (errors.username) {
      // 当发生错误时，通过ref.current.focus()聚焦到错误表单字段
      errorRef.current.focus();
    }
  }, [errors]);

  const onSubmit = (data) => {
    // 表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单字段 */}
      <input name="username" ref={(e) => {
        register(e, { required: true });
        errorRef.current = e; // 将错误表单字段的引用存储到ref.current中
      }} />
      {errors.username && <span>用户名不能为空</span>}
      
      {/* 其他表单字段 */}
      
      {/* 提交按钮 */}
      <button type="submit">提交</button>
    </form>
  );
}