## OPForm 组件

·API

| 参数           | 说明                                                                                                                                      | 类型   | 默认值 |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
| className      | 自定义样式类，可选                                                                                                                        | String | ''     |
| field          | field 实例，参考 fusion 的 [field](https://fusion.alibaba-inc.com/dsm/pc/components/detail/field?themeid=40463&tabActiveKey=component)    | field  | Field  |
| formItemLayout | 表单配置，参考 fusion 的 [form](https://fusion.alibaba-inc.com/dsm/pc/components/detail/form?themeid=40463&tabActiveKey=component)        | object | {}     |
| configs        | 表单项配置，参考 fusion 的 [form.item](https://fusion.alibaba-inc.com/dsm/pc/components/detail/form?themeid=40463&tabActiveKey=component) | array  | []     |
| columnNumber   | 列数，可选                                                                                                                                | number | 1      |

·configs

| 参数   | 说明                                                                                                           | 类型          | 默认值 |
| ------ | -------------------------------------------------------------------------------------------------------------- | ------------- | ------ |
| span   | 表单项宽度，可选值 1-24，参考 grid col 配置                                                                    | string/number | 24     |
| type   | 表单类型 可选值：input、select、number、radio、checkbox、switch、datepicker、daterangepicker、textarea、render | string        | input  |
| render | 自定义表单组件                                                                                                 | Function      | -      |

```jsx
import React, { useState, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { Input, Field } from '@alife/cn-ui';
import { OPForm, OPNumber, OPButton, OPSwitch } from '../src/view';

const DemoForm = () => {
  const [jsonValues, setJsonValues] = useState(null);

  const field = Field.useField({
    values: {
      disabledInput: 'TEST1235345',
      select: 1,
      daterangepicker: ['2021-01-01', '2023-01-01'],
    },
  });

  const onSubmit = () => {
    field.validate((errors, values) => {
      setJsonValues(JSON.stringify(values));
    });
  };

  const customInput = useCallback((props) => {
    return <OPNumber {...props} />;
  }, []);

  return (
    <div>
      <h1>布局 - 横排/多列</h1>
      <OPForm
        field={field}
        formItemLayout={{
          labelCol: {
            span: 6,
          },
          wrapperCol: {
            span: 18,
          },
        }}
        columnNumber={2}
        configs={[
          {
            type: 'input',
            name: 'input',
            label: '输入框',
            required: true,
            placeholder: '请输入',
          },
          {
            type: 'input',
            name: 'disabledInput',
            label: '禁用输入框',
            required: true,
            placeholder: '请输入',
            disabled: true,
          },
          {
            type: 'select',
            name: 'select',
            label: '选择框',
            dataSource: [
              { value: 1, label: '选择1' },
              { value: 2, label: '选择2' },
            ],
          },
          {
            type: 'number',
            name: 'number',
            label: '数字框',
          },
          {
            type: 'radio',
            name: 'radio',
            label: '单选框',
            dataSource: [
              { value: 1, label: '单选1' },
              { value: 2, label: '单选2' },
            ],
          },
          {
            type: 'checkbox',
            name: 'checkbox',
            label: '复选框',
            dataSource: [
              { value: 1, label: '复选1' },
              { value: 2, label: '复选2' },
            ],
          },
          {
            type: 'switch',
            name: 'switch',
            label: '开关',
          },
          {
            type: 'datepicker',
            name: 'datepicker',
            label: '日期',
            outputFormat: 'YYYY-MM-DD',
          },
          {
            type: 'daterangepicker',
            name: 'daterangepicker',
            label: '日期区间',
            outputFormat: 'YYYY-MM-DD',
          },
          {
            type: 'textarea',
            name: 'textarea',
            label: '多行文本',
            placeholder: '请输入',
            span: 24,
            labelCol: {
              span: 3,
            },
            wrapperCol: {
              span: 21,
            },
          },
          {
            type: 'render',
            name: 'render',
            label: '自定义',
            render: customInput,
          },
        ]}
      />
      <OPButton type='primary' size='small' onClick={onSubmit}>
        提交
      </OPButton>
      <p>{jsonValues}</p>
      <h1>布局 - 竖排/单列</h1>
      <OPForm
        field={field}
        configs={[
          {
            type: 'input',
            name: 'input',
            label: '输入框',
            required: true,
            placeholder: '请输入',
          },
          {
            type: 'select',
            name: 'select',
            label: '选择框',
            dataSource: [
              { value: 1, label: '选择1' },
              { value: 2, label: '选择2' },
            ],
          },
        ]}
      />
    </div>
  );
};

ReactDOM.render(<DemoForm />, mountNode);
```