FormState 使用指南

FormState 使用指南

formstate ❤️ Form state so simple that you will fall in love 🌹 项目地址: https://gitcode.com/gh_mirrors/fo/formstate

---

项目介绍

FormState 是一个简约而强大的表单状态管理库，旨在简化表单的处理过程，提升开发体验。它特别强调类型安全，利用 TypeScript 的强类型特性，确保编译时就能捕获错误，从而优化代码审查、编写和重构流程。FormState 与 MobX 高度兼容，适用于任何基于 MobX 的项目，无论是React还是其他框架环境，都可轻松集成，提供流畅的表单管理能力。

项目快速启动

要快速开始使用 FormState，首先你需要安装它。在你的项目目录下执行以下命令：

npm install formstate --save

或者，如果你使用的是 Yarn：

yarn add formstate

接下来，你可以在一个简单的组件中初始化 FormState，并创建几个 FieldState 来管理表单项。以下是一个基础示例：

import { FormState, FieldState } from 'formstate';

function App() {
    const form = new FormState();
    const name = form.createFieldState('John Doe'); // 初始化字段值

    const handleSubmit = () => {
        if (form.isValid()) {
            console.log('提交表单数据:', form.values);
        } else {
            console.log('表单验证未通过');
        }
    };

    return (
        <div>
            <input value={name.value} onChange={(e) => name.setValue(e.target.value)} />
            <button onClick={handleSubmit}>提交</button>
        </div>
    );
}

这段代码展示了如何创建一个基本的表单状态实例，并且创建了一个名为 name 的字段状态，用于控制输入框的值。

应用案例和最佳实践

表单验证

FormState 支持字段级别的验证和整个表单的验证逻辑。以下是添加简单验证规则的示例：

name.setValidators([{ validatorFn: (value) => value.length > 2, message: '姓名至少3个字符' }]);

在表单提交前，可以通过 form.isValid() 检查所有字段是否通过了验证。

实时反馈

为了提供实时的表单验证反馈，可以在每次字段变化时触发验证：

name.subscribe('validity', () => {
    // 更新UI显示验证结果
});

典型生态项目

虽然 FormState 自身是独立于特定的UI框架的，但在实际应用中，它常与React或类似的库结合使用。对于那些寻求更高层次抽象、希望更无缝地集成到React应用中的开发者来说，可以探索将FormState与其他UI库（如React的Hooks）结合使用的策略。例如，尽管FormState没有官方的React绑定，但其设计原理与React Hook Form等库的精神相吻合，使得两者虽非直接关联，却能在React应用中各自发挥优势，共同构建健壮的表单解决方案。

---

以上就是使用FormState的基本指引，更多高级功能和详细文档，请访问 FormState 官方文档 进行深入学习。

formstate ❤️ Form state so simple that you will fall in love 🌹 项目地址: https://gitcode.com/gh_mirrors/fo/formstate