React-hook-form与react-phone-input-2提交时报TypeError: elm.focus错误

• 错误原因：添加正则校验后，表单校验失败时React Hook Form会自动尝试通过field.ref聚焦对应输入组件，但PhoneInput是封装后的组件，field.ref没指向内部原生<input>元素，调用focus()方法就会报错。

• 修复方案：手动把field.ref绑定到PhoneInput内部的原生输入框，同时保留原有校验规则，代码修改如下：

  <Controller
    name="phone1"
    control={control}
    rules={{
      required: "Phone is required",
      pattern: /^\+380\s\(\d{2}\)\s\d{3}\s\d{2}\s\d{2}$/,
    }}
    render={({ field, fieldState: { error } }) => (
      <>
        <PhoneInput
          {...field}
          country="ua"
          onlyCountries={["ua"]}
          onChange={(value, country, e, formattedValue) => {
            field.onChange(formattedValue);
          }}
          inputProps={{
            autoFocus: false,
            countryCodeEditable: false,
            ref: field.ref, // 关键：将field.ref绑定到原生输入框的ref上
          }}
        />
        {error && <p role="alert">{error.message}</p>}
      </>
    )}
  />
  

• 补充说明：

  • 确认你用的PhoneInput库支持通过inputProps传递ref到内部原生输入框（比如react-phone-input-2这类主流库都支持）。
  • 原有必填项和手机号格式校验规则完全保留，表单提交前会自动执行这两项校验，校验失败时会正常显示错误提示并聚焦到输入框。

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