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组件管理单个表单域。 还可以通过useFieldArray和FieldArray实现嵌套表单。

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