这样的表单不要太舒适——React Hook Form

官方地址

What is 'React Hook Form'

一个利用各类Hooks管理Form表单的状态的第三方库。

Why to use it

• 代码简洁：简单直观的使用方式，易于维护理解。
• 快速设置校验交互：高效设置表单校验规则与交互UI。
• TS兼容性：利用TypeScript可更轻易掌控表单对象的结构。
• Hooks：深度贯彻Hooks理念，利用一系列Hooks掌控表单的状态。
• UI库兼容性：利用 Controller组件轻易兼容各类UI库的使用，例如Antd、Material UI等等。
• 功能齐全、强大：各类hooks满足所有对表单的使用情况。

How to use it

安装

npm install react-hook-form

基础使用

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
  
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
  
      <input type="submit" />
    </form>
  );
}

使用 useForm()初始化表单对象，在TS中，可使用 useForm<iInterface>()声明表单的各数据项。

使用 register来声明各数据项对应的组件传值，例如 value、onChange事件等，其中还可书写校验规则，在 handleSubmit()中进行对应的表单校验。

使用 errors获取校验结果，显示对应校验提示文本。

结合Antd UI库

import { Form, Button， Input } from "antd"
import { Controller, useForm } from "react-hook-form"

interface iForm {
  username: string
  password: string
}

export default function App() {
  const { control, handleSubmit, formState: { errors } } = useForm<iForm>()

  const onSubmit = (formData: iForm) => {
    console.log("提交表单", formData)
  }

  return (
    <Form layout="vertical" onFinish={handleSubmit(onSubmit)}>
      <Form.Item name="username" label="用户名">
        <Controller 
          name="username"
          control={control}
          render={({ field }) => (
            <Input {...field} />
          )}
        />
      </Form.Item>
      <Form.Item name="password" label="密码">
        <Controller 
          name="password"
          control={control}
          rules={{
            required: true,
            pattern: /^[a-zA-Z](?=.*\d).{7,}$/
          }}
          render={({ field }) => (
            <Input.Password
               placeholder="请输入密码"
               autoComplete="tel"
               {...field}
             />
             {errors.password?.type === 'required' && (
               <span className="absolute text-red/[.90] text-sm left-0 top-12">
                 密码不能为空
               </span>
             )}
             {errors.password?.type === 'pattern' && (
               <span className="absolute text-red/[.90] text-sm left-0 top-12">
                 密码必须包含字母和数字，且长度至少为8位
               </span>
             )}
          )}
        />
      </Form.Item>
    </Form>
  )
}

利用 Controller可以很好地将 React Hook Form和UI库结合使用，在 render绑定的函数中返回需要渲染的组件，利用传参 field传递 value和 @onChange值。

rule中还可设置 isEqual: (value) => value === getValues('username')自定义校验规则。

更多Hooks

• getValues(LABEL || undefined) 获取表单数据（某项或全表单）
• setValue(LABEL, VALUE) 手动修改表单某项数据
• useForm(defaultValue: {LABEL1: VALUE1, LABEL2: VALUE2}) 设置表单初始默认值
• reset() 重置表单数据为默认值

更多hooks请跳转官网查看