react-conf-form v1.2.18

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

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

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

列 (fields: field, ...)