Skip to content

xueyou2000/xy-form

Repository files navigation

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-form

xy-form

表单组件, 提供了表单样式, 数据存储

安装

# yarn
yarn add xy-form

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Form, Separator, FormBlock, FormItem, FormItemField, FormSubmitButton } from "xy-form";
ReactDOM.render(
    <Form onSubmitBefore={onSubmitBefore} onSubmit={onSubmit}>
        <FormItem label="姓名" prop="name">
            <input type="text" />
        </FormItem>
        <FormItem label="手机号" prop="phone">
            <input type="text" />
        </FormItem>
        <FormSubmitButton>
            <button>提交</button>
        </FormSubmitButton>
        <input type="reset" value="重置" />
    </Form>,
    container,
);

API

Form

属性 说明 类型 默认值
disabled 是否禁用表单 boolean false
trigger 默认触发事件 ValidateTrigger ValidateTrigger.change
labelPosition 标签对齐位置 "right"/"left"/"top" "left"
labelWidth 标签宽度 string "85px"
inline 是否内联模式 boolean false
action 与原生表单一样 string
enctype 与原生表单一样 string
method 与原生表单一样 string
name 与原生表单一样 string
target 与原生表单一样 string
defaultModel 默认对象, 用于提供默认值 any
validConfig 验证配置 ValidateConfig
getFormMethods 获取表单方法 (methods: FormMethods) => void
onFieldChange 字段值改变事件 (prop: string, value: any) => void
onFieldValidate 字段需要验证事件 (value: any, configs: FieldConfig[], params: ValidateParams) => Promise
onSubmitBefore 开始点击提交按钮 (data: any) => void
onFormValidate 表单需要验证事件 (fieldMapper: React.MutableRefObject<Map<string, FormItemState>>) => Promise
onValidateFail 表单验证失败事件 (error: Error, data: any) => void
onSubmit 表单提交事件 (data: any) => void

FormBlock

属性 说明 类型 默认值
prop 字段域名称 string

FormItemField

属性 说明 类型 默认值
prop 代理字段名 string
valueKey 代理值的 key string "value"
converValue 如何从 onChange 转换值 (val: any) => any
label 中文标签名 string
children 代理输入组件 React.ReactNode
trigger 默认触发事件 ValidateTrigger
defaultValue 默认值 any
normalize 规范化函数, 比如绑定的是 Date 类型,form 最后同步时可以是日期字符串 (value: T) => NormalizeResult
disabledValidate 是否禁用验证 boolean
onValidate 执行验证事件 (value: T, validateResult: ValidateResult, input: HTMLElement, normalize?: (value: T) => NormalizeResult) => void

FormItem

属性 说明 类型 默认值
labelPosition 标签对齐位置 "right"/"left"/"top" "left"
prop 代理字段名 string
valueKey 代理值的 key string "value"
converValue 如何从 onChange 转换值 (val: any) => any
label 中文标签名 React.ReactNode
children 代理输入组件 React.ReactNode
trigger 默认触发事件 ValidateTrigger
defaultValue 默认值 any
normalize 规范化函数, 比如绑定的是 Date 类型,form 最后同步时可以是日期字符串 (value: T) => NormalizeResult
serialization 序列化函数, 将外部设置的值,(比如默认值和 getFieldValue 的值进行转换然后设置) (value: T) => any
disabledValidate 是否禁用验证 boolean
onValidate 执行验证事件 (value: T, validateResult: ValidateResult, input: HTMLElement, normalize?: (value: T) => NormalizeResult) => void

Form

  • 顶级就能控制所有输入框的 disabled 状态
  • 提供通用的默认配置, 详细看FormContext
  • 提供很多事件钩子, 比如字段值改变, 比如字段验证状态改变, 比如表单验证完毕等
  • 挂接原生 submit,rest 事件
  • 表单样式
  • 提供表单方法, 详细看FormMethods

FormBlock

  • 用于嵌套数据

FormItem

  • 提供表单段落样式
  • 显示错误信息文本
  • 指定某个字段验证状态改变后, 再次判断是否验证失败
  • 提供了prop则默认自带FormItemField组件

FormItemField

  • 代理包裹组件的value, onChange, disabled属性
  • 内部有验证是否失败状态, 和失败原因
  • 初始化时候保留当前组件初始值, initialValue, 在 form.resetFields()时候以重置输入框的值
  • normalize, 可选规范化函数, 比如绑定的是 Date 类型,form 最后同步时可以是日期字符串

FormContext

提供整体通过默认状态

  • disabled 是否全部默认禁用
  • trigger 全部默认触发事件
  • labelPosition 标签对齐位置 "right" | "left" | "top"
  • labelWidth 标签宽度
  • inline 是否内陆模式

FormMehhods

提供表单操作功能

export interface FormMethods {
    /**
     * 设置模型值
     * @description 快速设置整个模型的值
     */
    setModel: (model: any) => any;
    /**
     * 获取字段值
     */
    getFieldValue: (prop: string) => any;
    /**
     * 设置字段值
     */
    setFieldValue: (prop: string, value: any) => void;
    /**
     * 获取字段验证结果
     */
    getFieldValidateResult: (props: string) => ValidateResult;
    /**
     * 重置字段到初始值
     */
    resetField: (prop: string) => void;
    /**
     * 重置所有字段到初始值
     */
    resetFields: () => void;
    /**
     * 验证指定字段
     */
    validateField: (prop: string) => Promise<any>;
    /**
     * 验证所有字段
     */
    validateFields: () => Promise<any>;
    /**
     * 获取对应标签
     */
    getFieldLabel: (prop: string) => React.ReactNode;
    /**
     * 表单提交
     */
    submit: (uncaught?: boolean) => Promise<any>;
    /**
     * 获取数据
     */
    toData: () => any;
}

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-form is released under the MIT license.

About

基于React的表单组件

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published