joyerz/react-conf-form

react configurable form includes validation, extensible field by configurable file in json

React Conf Form

集成了antd的配置化表单(思路来源于jsonschema form) 不同的是，简化了配置的书写以及数据的提取

继承了控件Input, Button, Select, Upload等常用控件，可自定义扩展控件

自带校验规则，可扩展校验规则

表单数据自动提取

安装install

yarn add react-conf-form 
or 
npm install react-conf-form

使用usage

import * as React from 'react'
import Form from 'react-conf-form'
import 'react-conf-form/dist/index.css' // import once

export default class FormDemo extends React.Component {
    onSubmit = (data) => { console.log(data) }
    
    render() {
      return (
        <Form
          fields={FIELDS_CONF}
          dataSource={DATA_SOURCE}
          onSubmit={this.onSubmit}
        />
      )
    }
}

参数 props

参数	类型	默认值	描述
spinning?	boolean	false	是否显示加载状态
validateOnChange?	boolean	true	是否在onChange自动进行校验
labelDirection?	'vertical' | 'horizontal'	horizontal	label位置
labelWidth?	number	120	label的宽度
fields	Array<...>	-	fields
dataSource?	Object	-	初始值对象（对应fields的key相应的属性值)
onSubmit?	(data) => void	-	提交(data为最新的值)
onChange?	(key, value, data) => void	-	任意表单项修改触发
onReset?	() => void	-	重置触发
extendFields?	Array	-	扩展表单控件
extendValidators?	Array	-	扩展校验规则

onSubmit = (data) => console.log(data)

onChange = (name, value, data) => console.log(name, value, data)

onReset = () => {}

render() {
  const FIELDS = [...]

  return (
    <Form
      spinning={false}
      validateOnChange={true}
      labelDirection="horizontal"
      labelWidth={120}
      fields={FIELDS}
      dataSource={{}}
      onSubmit={this.onSubmit}
      onChange={this.onChange}
      onReset={this.onReset}
      extendFields={[]}
      extendValidators={[]}
    />
  )
}

配置

行 Row

参数	类型	默认值	描述
span?	number	8	行内单元格所占珊格，最大24
gutter?	number	16(px)	间隔
type?	'FormButtons' | string	-	按钮行 / 常规控件行
style?	object	-	自定义样式
className?	string	-	自定义样式class
display?	string	true	是否显示
fields	array		单元格配置
align?	center | left | right	-	适用于按钮行(FormButtons), 按钮的对齐方式

const FIELDS = [
  { // row 
    span: 8,
    gutter: 16,
    display: true,
    type: 'fields',
    fields: [...], // field's cols
  }
]

列 (fields: [field, ...])

参数	类型	默认值	描述
key	string(唯一)	-	field & data对应的key
span?	number(1~24)	继承row	栅格宽度
offset?	number(1~24)	0	偏移栅格
label	string	-
type	string	-	input, render, timepicker...
display?	boolean	true	是否展示
readOnly?	boolean	false	是否只读
className?	string	-	css class
props			控件内部的参数
	className?	-	css class
	rules: Array	[]	rules for validation
	onChange?: (name, value) => void	-
	beforeChange?: (name, value) => new value	-	onChange触发前调用，用于覆盖处理onChange的值
	onClick?: (data) => any		当type="button"，点击回调
	render?: string | Node | (data) => any		当type="render"，render方法/对象
	addon?: string | Node | (data) => any		额外的render
	...others