A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/luoanb/hook-form-react/blob/main below:

luoanb/hook-form-react: This library is a lightweight, dependency-free solution for form validation and submission designed specifically for React applications. 该库是一个专为 React 应用设计的轻量级、无依赖的表单验证和提交解决方案。

This library is a lightweight, dependency-free solution for form validation and submission designed specifically for React applications.The following component libraries have been adapted: Next UI, Ant Design, and MUI.

该库是一个专为 React 应用设计的轻量级、无依赖的表单验证和提交解决方案。目前已适配完成一下组件库Next UI、Ant Design、MUI。

推荐直接看示例：这里更新是最即时的，也是推荐的使用方式。

中文 | English | API | GitHub | 示例:Stackblitz | 示例:GitHub

基于 React Hooks 和 TypeScript 开发，旨在提供一个简洁、高效且易于扩展的方式来处理表单验证和提交，无论是在简单还是复杂的表单场景中都能灵活应对。本库的设计哲学是兼容性和扩展性，理念是支持开发者以最少的代码实现最丰富的功能，核心不绑定任何 UI 组件库，从而支持所有 React 组件库；对第三方组件库的支持以独立模块方式实现。

# pnpm
pnpm add hook-form-react

# yarn
yarn add hook-form-react

# npm
npm i hook-form-react

提供了辅助工具，可以使得开发更快捷，同时不丢失高度的可定制性

// 提供了辅助工具，可以使得开发更快捷，同时不丢失高度的可定制性
import { Button, Input } from '@nextui-org/react'
import { useAttr, useFormData, Verifications } from 'hook-form-react'

export const Example = () => {
  const formData = useFormData(
    { password: '', username: '' },
    {
      // 支持多个校验
      password: [
        // 自带验证器必填校验
        // 开发者也可以自行在项目中补充其它验证规则，具体请看开发者文档（待补充）
        Verifications.required()
      ],
      username: [
        // 自带验证器的必填校验 + 自定义提示
        Verifications.required('用户账户不能为空')
      ]
    }
  )

  // 使用组件快速绑定hook
  const attr = useAttr(formData)

  const submit = async () => {
    const isValid = await formData.doAllValidate()
    console.log('submit:isValid: ', isValid)
    if (isValid) {
      console.log('formValue', formData.value)
    }
  }

  return (
    <div className="p-10 pt-18 pb-0 flex-col">
      <Input
        placeholder="请输入账户"
        // 快速绑定
        // NextUI.N_Input属于针对[NextUI.Input]的兼容层
        // 开发者也可以自行在项目中补充第三方组件,具体请看开发者文档(待补充)
        {...attr('username', attr.NextUI.Input)}

        // 自定义绑定逻辑
        // value={formData.value.username}
        // onChange={(e) => formData.pushValue('username', e.target.value)}
        // isInvalid={formData.errors.username?.isInvalid}
        // errorMessage={formData.errors.username?.msg}
      ></Input>
      <Input
        autoComplete="new-password"
        type="password"
        placeholder="请输入登录密码"
        {...attr('password', attr.NextUI.Input)}

        // 自定义绑定逻辑
        // value={formData.value.password}
        // isInvalid={formData.errors.password?.isInvalid}
        // errorMessage={formData.errors.password?.msg}
        // onChange={(e) => formData.pushValue('password', e.target.value)}
      ></Input>

      <Button onClick={submit}>登录</Button>
    </div>
  )
}

新增一个 hook useSubFormData用于处理嵌套表单，原则上可以处理任意层数的对象嵌套（也就是无限套娃）。

// useSubFormData
const value10Form = useSubFormData(formData.formData, 'value10', {
  haha: [Verifications.required(), Verifications.email()]
})

/**
 * 嵌套对象的表单组件需要用它来绑定
 */
const attrValue10 = useAttr(value10Form)

// 提交
const submit = async () => {
  const isValid = await formData.doAllValidate()
  // 嵌套表单需要单独验证
  const isValidValue10 = await value10Form.doAllValidate()
  console.log('submit:isValid: ', isValid, isValidValue10)
  if (isValid && isValidValue10) {
    //顶层form能拿到所有value
    console.log('formValue', formData.value)
  }
}

// 重置
const reset = () => {
  formData.reset()
  // 错误状态得单独重置
  value10Form.formErrors.reset()
}

本节应详细介绍库中提供的 Hooks、函数及其参数、返回值类型和使用示例，以便开发者能够快速上手并有效利用库的功能。

API

我们欢迎并鼓励社区成员对本项目做出贡献，无论是通过提交错误报告、功能请求还是直接提交代码。请参阅我们的贡献指南了解更多信息。

该项目采用 MIT 许可证，详情请见LICENSE文件。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4