Formex - 反应表单库
Formex是一个轻量级,灵活的库,旨在简化React应用程序内的形式处理. 通过利用React强大的上下文和钩子特征,Formex允许高效地以最低锅炉板代码的形式进行状态管理.
特征
- 轻而易举
- 支持自定义字段组件
- 内建验证处理
- 提供外地一级和形式一级的国家管理
安装
要安装Formex, 您可以使用 npm 或纱线 :
npm install @firecms/formex
# or if you're using yarn
yarn add @firecms/formex
快速启动
要从Formex开始,您首先需要创建您的形式上下文,并使用 useCreateFormex 钩. 然后,你可以使用 <Field /> formex 提供的组件.
步骤1: 创建窗体控制器
import React from 'react';
import { useCreateFormex } from 'formex-library';
const MyForm = () => {
const formController = useCreateFormex({
initialValues: {
name: '',
email: '',
},
// Optionally add a validation function
// validation: values => {
// const errors = {};
// if (!values.name) errors.name = 'Name is required';
// return errors;
// },
onSubmit: (values) => {
console.log('Form Submitted:', values);
},
});
return (
<form onSubmit={formController.handleSubmit}>
{/* Field components go here */}
</form>
);
};
步骤2:使用 <Field /> 组件
import { Field } from 'formex-library';
// Inside your form component
<Field name="name">
{({ field }) => (
<input
{...field}
placeholder="Your name"
/>
)}
</Field>
<Field name="email">
{({ field }) => (
<input
{...field}
type="email"
placeholder="Your email"
/>
)}
</Field>
<button type="submit">Submit</button>
处理提交材料
在窗体元素内将窗体输入和提交按钮并传递 submitForm 从表单控制器到表单 onSubmit 事件:
<form onSubmit={formController.handleSubmit}>
{/* Fields and submit button */}
</form>
API 参考
useCreateFormex
钩来创建窗体控制器.
参数
initialValues: 带有窗体初始值的对象.initialErrors(可选) : 初始验证错误的对象 .validation(可选):用于验证窗体数据的函数.validateOnChange(可选):如果true,当字段改变时,验证字段.onSubmit: 提交表单时起火的函数.
<Field />
用于制取单个形式字段的组件 .
道具
name:形式字段的名称.as(可选) : 应当渲染的组件或 HTML 标记 。 默认为"input"。 。 。 .children: 返回字段输入组件的函数。 接收字段道具作为其参数.
示例
<Field name="username">
{({ field }) => <input {...field} />}
</Field>
自定义
Formex的设计是灵活的. 您可以创建自定义字段组件,使用任何验证库,或者与UI组件库相集.
使用 UI 图书馆
import { Field } from 'formex-library';
import { TextField } from 'some-ui-library';
<Field name="username">
{({ field }) => (
<TextField {...field} label="Username" />
)}
</Field>
自定义验证
利用 validation 函数在 useCreateFormex 以整合任何验证逻辑或库.
const validate = values => {
const errors = {};
if (!values.email.includes('@')) {
errors.email = 'Invalid email';
}
return errors;
};
结论
Formex提供了一种简单而强大的在React应用程序中管理表格的方法. 它减少了需要的锅炉平板码数量并提供了与自定义组件和验证策略合作的灵活性. Formex 可以帮助简化表格管理程序.
关于进一步的例子和高级用法,参见Formex文档或源代码.