@feizheng/react-ant-form NPM

react-ant-form

React basic ant form builder.

installation

npm install -S @feizheng/react-ant-form

update

npm update @feizheng/react-ant-form

properties

Name	Type	Default	Description
className	string	-	The extended className for component.
fieldsValue	object	{}	Default fileds value object.
items	array	[]	Form schema.
defaultComponent	any	Input	Default item component.
onSubmit	func	noop	The onSubmit event.
onLoad	func	noop	When component did mount.
formLayout	object	-	The formLayout for antd.Form.
submitLabel	string	' '	The submit label.
submitProps	object	-	The submit props.

usage

import css

@import "~@feizheng/react-ant-form/dist/style.scss";

// customize your styles:
$react-ant-form-options: ()

import js

import ReactAntForm from '@feizheng/react-ant-form';
import { Input, Checkbox } from 'antd';
import ReactDOM from 'react-dom';
import React from 'react';
import ReactAntCheckbox from '@feizheng/react-ant-checkbox';
import noop from '@feizheng/noop';
import '@feizheng/next-ant-fields-value';
import './assets/style.scss';

class App extends React.Component {
  state = {
    fieldsValue: nx.antFieldsValue({
      username: 'fei',
      password: 'test',
      chk: false,
      text: 'etst...'
    }),
    items: [
      {
        label: 'username',
        field: 'username'
      },
      {
        label: 'password',
        field: 'password'
      },
      {
        label: 'test-checkbox',
        field: 'chk',
        component: ReactAntCheckbox,
        props: {
          children: 'Agree the agreement'
        }
      },
      {
        label: 'Text',
        field: 'text',
        component: Input.TextArea
      }
    ]
  };

  handleSubmit = (e) => {
    console.log(e);
    return {
      then: nx.noop
    };
  };

  render() {
    return (
      <div className="app-container">
        <ReactAntForm
          fieldsValue={this.state.fieldsValue}
          onSubmit={this.handleSubmit}
          items={this.state.items}
          submitProps={{
            type: 'primary',
            htmlType: 'submit',
            className: 'wp-10',
            children: '保存'
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));