组件分享之前端组件——用于表单状态管理和验证的 React Hooks (Web + React Native)...

组件分享之前端组件——用于表单状态管理和验证的 React Hooks (Web + React Native)

背景

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

组件基本信息

• 组件：react-hook-form
• 开源协议：MIT license
• 官网：react-hook-form.com

内容

本次分享的用于表单状态管理和验证的 React Hooks (Web + React Native)，在其构建时考虑到性能、UX 和 DX，采用原生 HTML 表单验证，与UI 库的开箱即用集成，体积小，无依赖，支持Yup , Zod , Superstruct , Joi , Vest , class-validator , io-ts , nope和 custom

使用起来也比较方便，具体使用方式如下：
1、安装

npm install react-hook-form

2、使用

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

更多内容可以查看其官方提供的详细使用说明

本文声明：

88x31.png

知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

https://github.com/react-hook-form/react-hook-form