---
title: 基础表单用法
order: 1
---



预览态 配置 editable 为 false 

不可编辑 配置 disabled 为 true 

图片、文件、视频上传 用@ywfe/ywd Upload组件 本demo Upload为伪代码实现

```jsx
import React, { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
// import { YUpload } from "@ywfe/ywd";
const Upload = ({field,...props}) => {
  // div 替换成 YUpload 
    return (
      <div
        {...props}
        disabled = {!field.editable || props.disabled}
        uploadFinish={(res) => {
          // 上传完成事件
          field.setValue(res.url);
        }}
        onChange={(res) => {
          // 监听移除事件
          if (res.length === 0) {
            field.setValue("");
          }
        }}
      >{JSON.stringify(props)}</div>
    );
  };

const items = [
  {
    title: '输入框',
    name: 'input',
    component: 'Input',
    type: 'string',
    disabled: true,
    props:{
      addonAfter:'addonAfter',
    }
  },
  {
    title: '下拉框',
    name: 'select',
    component: 'Select',
    type: 'string',
    componentProps: {
      dataSource: [
        { name: 'AAA', code: 1 },
        { name: 'BBB', code: 2 },
      ],
      fieldNames:{label: 'name', value: 'code'},
    },
  },
  {
    type: 'boolean',
    title: '是否确认',
    component: 'Switch',
  },
  {
    type: 'number',
    name: 'radio',
    title: '单选',
    enum: [
      {
        label: '选项1',
        value: 1,
      },
      {
        label: '选项2',
        value: 2,
      },
    ],
    component: 'RadioGroup',
  },
  {
    type: 'array',
    name: 'multiple',
    title: '复选',
    enum: [
      {
        label: '选项1',
        value: 1,
      },
      {
        label: '选项2',
        value: 2,
      },
    ],
    component: 'CheckboxGroup',
  },
  {
    type: 'string',
    name: 'multiple',
    title: '复选',
    enum: [
      {
        label: '选项1',
        value: 1,
      },
      {
        label: '选项2',
        value: 2,
      },
    ],
    component: 'CheckboxGroup',
  },
  {
    type: 'string',
    name: 'multiple',
    title: '复选',
    enum: [
      {
        label: '选项1',
        value: 1,
      },
      {
        label: '选项2',
        value: 2,
      },
    ],
    component: 'CheckboxGroup',
  },
  {
    type: 'string',
    name: 'inputGroup',
    title: '输入框组合',
    defaultValue:'createTime',
    enum: [
      { value: 'orderTime', label: '下单时间' },
      { value: 'createTime', label: '创建时间' },
    ],
    // required:true,
    component: 'InputGroup',
    children:[
      {
       type: 'array',
        name: 'date',
        // required:true,
        component: 'DateRangePicker',
        defaultValue: ['2022-07-09', '2022-07-23'],
        componentProps: {
          ranges: ['昨天', '今天', '7天', '30天'],
          allowClear:true
        },
      }
    ]
  },
  {
    name: '[minNumber,maxNumber]',
    title: '数字区间',
    component: 'NumberRangePicker',
    componentProps: {
      prefix:'￥',
      suffix:'RMB',
      min:1,
      max:5,
      formatter:value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
      parser:value => value?.replace(/\$\s?|(,*)/g, ''),
    },
  },
  {
    type: 'string',
    name: 'image',
    title: '上传图片',
    customComponent: Upload,
    // required:true,
    componentProps:{
      errMessage:'支持.jpg,.gif,.png,.jpeg格式，最多1张图片',
      quantity:1,
      value:'',
      disabled:false,
      isOss:true,
      multiple:true,
      accept:'.jpg,.gif,.png,.jpeg',
    }
  },
   {
    type: 'string',
    name: 'file',
    title: '附件',
    customComponent: Upload,
    // required:true,
    componentProps:{
      errMessage:'支持.exls,.pdf格式',
      quantity:1,
      value:'',
      disabled:false,
      isOss:true,
      multiple:false,
      accept:'.exls,.pdf,',
    }
  },
  {
    type: 'string',
    name: 'textArea',
    title: '多行编辑器', 
    component: 'TextArea',
    description: '这里是一段说明描述',
  },

];
const buttons = [{ htmlType: 'submit',btnText:'提交' }, { htmlType: 'reset',btnText:'重置' }];


let form = null;


const onSubmit = (form) => {
  console.log('submit', form);
};

const onCreate = (_form) => {
  console.log('create', _form);
  // form实例  Formily2.0  文档传送门 https://core.formilyjs.org/zh-CN/api/models/form
  form = _form 
  // 设置初始值
  form.setInitialValues({ input: 123 })
};


const App = () => {

 
    return (
      <div>
        <YwJsonForm items={items} scrollIntoView buttons={buttons} onCreate={onCreate} onSubmit={onSubmit} />
      </div>
    );
}

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