FaasJS 3.7.0 发布，重磅推出 headless Form 组件，帮助开发者以更少的代码构建自定义表单

FaasJS 3.7.0 版本重磅推出了 headless Form 组件，让开发者能以更简洁的方式构建自定义表单。作为一个基于 TypeScript 的原子化全栈框架，FaasJS 与 React 的完美配合让表单开发变得前所未有的轻松。

为什么需要新的表单组件？

在日常开发中，表单往往是最常见却也最繁琐的部分。我们需要处理布局、状态管理、数据校验、提交逻辑等诸多细节。不同平台和设计规范下的表单样式千差万别，这又进一步增加了开发难度。

新版本中的 headless Form 组件正是为解决这些痛点而生。它提供了：

简洁的 API 设计，最少的代码实现表单功能
内置的状态管理，无需手动处理表单数据
灵活的校验机制，支持同步和异步验证
完全可自定义的界面，轻松适配不同平台
类型安全，完整的 TypeScript 支持

如何使用？

最基础的用法非常简单。只需几行代码，就能创建一个功能完整的表单：

import { Form } from '@faasjs/react'

function MyForm() {
  return <Form
    items={[ // 表单内容配置
      { name: 'name', roles: { required: true } }, // 内置校验功能
    ]}
    onSubmit={async (values) => { // 校验通过后提交表单，支持异步操作
      console.log(values)
    }}
  />
}

如果你需要自定义表单元素的展现形式，Form 组件提供了强大的自定义能力。无论是在 Web 端还是 React Native 中，都可以用相同的模式来实现：

import {  Form, type FormProps, type FormElementTypes } from '@faasjs/react'

// 自定义 Input 组件
const MyInput = ({ value, onChange }) => <input className='border rounded' value={value} onChange={e => onChange(e.target.value)} />

const MyFormElements = {
  Input: MyInput,
}

// 自定义 Form 组件
function MyForm<
  T extends Record<string, any> = Record<string, any>,
  FormElements extends FormElementTypes = typeof MyFormElements,
>(props: FormProps<T, FormElements>) {
  return <Form
    Elements={MyFormElements}
    {...props}
  />
}

这种设计让你能够在保持统一的表单逻辑的同时，根据不同场景自由定制界面表现。无论是企业级应用还是小型项目，都能轻松构建出专业的表单交互。

要了解更多高级特性和最佳实践，欢迎访问我们的文档站点。在接下来的版本中，我们还将带来更多实用功能，敬请期待。

为什么需要新的表单组件？

如何使用？

相关链接