Fomir：构建表单的全新方式-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00640/article/details/142046605

Fomir：构建表单的全新方式

fomirA Schema-First Form Library项目地址:https://gitcode.com/gh_mirrors/fo/fomir

在现代Web开发中，表单是不可或缺的一部分。无论是用户注册、数据收集还是信息提交，表单都扮演着重要的角色。然而，传统的表单开发方式往往繁琐且难以维护。为了解决这一问题，我们推出了Fomir——一个基于Schema的表单库，它将彻底改变你构建表单的方式。

项目介绍

Fomir是一个Schema-First的表单库，旨在通过简洁的Schema定义来快速构建复杂的表单。无论你是前端新手还是资深开发者，Fomir都能帮助你轻松创建出功能强大且易于维护的表单。

项目技术分析

Fomir的核心技术基于React，利用了React的Hooks和组件化思想，使得表单的构建更加模块化和可复用。通过定义Schema，开发者可以轻松地描述表单的结构和行为，而无需编写大量的重复代码。

主要技术特点：

Schema-First：通过Schema定义表单结构，减少代码冗余。
Hooks支持：利用React Hooks，使得表单状态管理更加简洁。
组件化：表单元素和逻辑高度解耦，便于复用和扩展。
轻量级：Fomir的体积非常小，不会给项目带来额外的负担。

项目及技术应用场景

Fomir适用于各种需要表单的场景，无论是简单的用户注册表单，还是复杂的数据收集表单，Fomir都能轻松应对。以下是一些典型的应用场景：

用户注册与登录：快速构建用户注册和登录表单，提升用户体验。
数据收集与提交：用于各种数据收集表单，如问卷调查、信息提交等。
后台管理系统：在后台管理系统中，用于构建各种数据录入和编辑表单。

项目特点

1. 简洁的Schema定义

Fomir通过Schema定义表单，使得表单的结构和行为一目了然。开发者只需关注Schema的编写，而无需担心复杂的表单逻辑。

const formSchema = {
  onSubmit(values) {
    alert(JSON.stringify(values, null, 2))
    console.log('values', values)
  },
  children: [
    {
      label: 'First Name',
      name: 'firstName',
      component: 'Input',
      value: '',
    },
    {
      label: 'Last Name',
      name: 'lastName',
      component: 'Input',
      value: '',
    },
    {
      component: 'Submit',
      text: 'submit',
    },
  ],
}

2. 支持Markup Schema

除了传统的Schema定义方式，Fomir还支持Markup Schema，使得表单的构建更加灵活和直观。

function BasicForm() {
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
  })

  return (
    <Form form={form}>
      <h2>Basic Info</h2>
      <Box bgGray100 rounded p3 mb4>
        <Field component="Input" label="First Name" name="firstName" />
        <Field component="Input" label="Last Name" name="lastName" />
      </Box>

      <h2>Extra Info</h2>
      <Box bgGray100 rounded p3 mb4>
        <Field component="Input" label="Email" name="email" />
        <Field component="Textarea" label="Bio" name="bio" />
      </Box>

      <button>Submit</button>
    </Form>
  )
}