组件绑定字段

说明

组件绑定字段是使用的React Hook Form的关键之一。组件绑定字段后，该组件的值就能够被用于表单校验和提交。

注意： 每一个字段都必须设置一个唯一的字段名。

关键步骤

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

const { register } = useForm();
  
<input {...register('firstName')} />

<select {...register('gender')}></select>

完整示例

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

enum GenderEnum {
  female = 'female',
  male = 'male',
  other = 'other',
}

interface IFormInput {
  firstName: String;
  gender: GenderEnum;
}

export default function RegisterField() {
  const { register, handleSubmit } = useForm<IFormInput>();
  
  const onSubmit = (data: IFormInput) => console.log(data);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input {...register('firstName')} />
      
      <label>Gender Selection</label>
      <select {...register('gender')}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      
      <input type="submit" />
    </form>
  );
}

校验与校验错误的处理

React-Hook-Form支持对每个字段设置独立的校验规则，且同时支持预置的HTML校验规则和第三方库的schema校验。

使用预置的校验规则

React-Hook-Form预置了以下的校验规则，这些规则与现有的HTML格式验证标准‎‎一致。

• required
• min
• max
• minLength
• maxLength
• pattern
• validate

定义规则

内置规则要求以键值对的形式定义，格式如下：

{
  字段名: {
    value: 规则,
    message: 校验错误时的提示信息,
  }
}

其中required可以省略value，直接以message作为键值对的值，如下：

{
  字段名: { required: 校验错误时的提示信息 }
}

校验规则与组件和字段绑定

将校验规则作为第二个参数传入组件的register方法，如下：

<input {...register(字段名, 校验规则)} />

获取校验错误时的提示信息

通过useForm取出错误信息，如下：

const { formState: { errors }} = useForm<IFormInputs>();

完整示例

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

interface IFormInputs {
  firstName: string;
  lastName: string;
  age: number;
}

const onSubmit: SubmitHandler<IFormInputs> = (data) => console.log(data);

export default function HandleErrors() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm<IFormInputs>();

  const validateSchema = {
    firstName: { required: 'First Name is required' },
    lastName: {
      required: 'Last Name is required',
      pattern: {
        value: /^[A-Za-z]+$/i,
        message: 'Characters in last name must be A-Z or a-z',
      },
    },
    age: {
      required: 'Age is required',
      min: {
        value: 18,
        message: 'Age must be larger than 18',
      },
      max: {
        value: 99,
        message: 'Age must be smaller than 99',
      },
    },
  };

  useEffect(() => {
    console.log('errors: ', errors);
  }, [errors]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input {...register('firstName', validateSchema.firstName)} />
      {errors.firstName && errors.firstName.message}

      <label>Last Name</label>
      <input {...register('lastName', validateSchema.lastName)} />
      {errors.lastName && errors.lastName.message}

      <label>Age</label>
      <input type="number" {...register('age', validateSchema.age)} />
      {errors.age && errors.age.message}

      <input type="submit" />
    </form>
  );
}