Rx Form State
Edit page
开始快速入门
教程
API

@sinoui/rx-form-state

@sinoui/rx-form-state是用来管理表单状态的库。

快速入门

安装

yarn add @sinoui/rx-form-state

入门示例

import React from 'react';
import { useFormState, FormStateContext, Field } from '@sinoui/rx-form-state';
function FormDemo() {
const initialValue = {}; // 表单默认值
const options = {}; // 创建表单状态管理器的配置
const formState = useFormState(initialValue, options);
return (
<FormStateContext.Provider value={formState}>
<form>
<label>
姓名:
<Field as="input" name="userName" required />
</label>
<label>
年龄:
<Field as="input" name="age" required />
</label>
</form>
</FormStateContext.Provider>
);
}

使用useFormState创建表单状态管理器对象,通过FormStateContext加入到表单上下文中。 通过Field组件管理单个表单域。 还可以通过useFieldArrayFieldArray实现嵌套表单。

@sinoui/rx-form-state 可以在 React 和 React native 中使用。可以与多种 UI 库组合使用,如material-uiant design@sinoui/core