尝试将react-hook-form与react-input掩码结合使用

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Phone Number</label>
        <InputMask
          mask="(999) 999-9999"
          {...register("phoneNumber", { required: true })}
        >
          {({ field }) => <input {...field} />}
        </InputMask>
        {errors.phoneNumber && <p>This field is required</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

<InputMask
  mask="(999) 999-9999"
  {...register("phoneNumber", { required: true })}
  onChange={(e) => {
    register("phoneNumber").onChange(e); // 手动触发 onChange 事件
  }}
>
  {({ field }) => <input {...field} />}
</InputMask>