ReForm 项目教程

ReForm 项目教程

reform 📋 Reasonably making forms sound good 项目地址: https://gitcode.com/gh_mirrors/refo/reform

1. 项目介绍

ReForm 是一个为 ReScript 和 React 设计的表单库，旨在通过利用 ReScript 的强大类型系统，使表单处理变得简单且类型安全。ReForm 不是现有表单库的绑定，而是从头开始创建的，专门用于与 ReScript 和 React 一起使用。它提供了 Hook API 和 Schema API，支持 OnDemand 和 OnChange 两种验证策略，并且具有小巧的代码体积。

2. 项目快速启动

安装依赖

首先，使用 Yarn 安装 ReForm 和 ReSchema：

yarn add @rescriptbr/reform @rescriptbr/reschema

然后，将这些依赖添加到 bsconfig.json 文件中：

{
  "bs-dependencies": [
    "@rescriptbr/reform",
    "@rescriptbr/reschema"
  ]
}

接下来，安装 lenses-ppx 并更新 bsconfig.json 文件：

yarn add lenses-ppx -D

在 bsconfig.json 中添加 ppx-flags：

{
  "ppx-flags": [
    "lenses-ppx/ppx"
  ]
}

创建一个简单的表单

以下是一个使用 ReForm 创建的简单表单示例：

module Form = ReForm.Make(struct
  type state = {
    name: string,
    email: string,
  }

  type fields = [
    | `name
    | `email
  ]

  let schema = ReSchema.Schema.(
    make(
      object([
        field("name", string, required),
        field("email", string, required),
      ])
    )
  )

  let initialState = {
    name: "",
    email: "",
  }

  let validate = (_state) => Ok(())
end)

@react.component
let make = () => {
  let form = Form.useForm()

  <form onSubmit={form.submit}>
    <input
      value={form.values.name}
      onChange={e => form.handleChange(`name, ReactEvent.Form.target(e)["value"])}
    />
    <input
      value={form.values.email}
      onChange={e => form.handleChange(`email, ReactEvent.Form.target(e)["value"])}
    />
    <button type_="submit"> {"Submit"->React.string} </button>
  </form>
}

3. 应用案例和最佳实践

应用案例

ReForm 适用于需要高度类型安全的表单处理场景，特别是在使用 ReScript 和 React 构建的应用中。例如，在一个用户注册表单中，可以使用 ReForm 来确保用户输入的数据符合预期的类型和格式。

最佳实践

1. 使用 Schema API：通过定义 Schema，可以确保表单字段的类型和验证规则在编译时就被检查，减少运行时错误。
2. 利用 Hook API：使用 useForm Hook 来管理表单状态和验证逻辑，使代码更加简洁和易于维护。
3. 自定义验证：可以根据业务需求自定义验证逻辑，确保表单数据的完整性和准确性。

4. 典型生态项目

ReForm 是 ReScript 生态系统中的一个重要组件，与其他 ReScript 项目（如 ReScript React）紧密集成。以下是一些与 ReForm 相关的典型生态项目：

• ReScript React：用于构建 React 组件的 ReScript 绑定。
• ReSchema：与 ReForm 一起使用的 Schema 定义库，用于定义表单字段的类型和验证规则。
• lenses-ppx：用于在 ReScript 中处理不可变数据的 PPX 扩展。

通过这些项目的结合使用，可以构建出高效、类型安全的表单处理系统。

reform 📋 Reasonably making forms sound good 项目地址: https://gitcode.com/gh_mirrors/refo/reform