---
title: 编辑表单 
order: 2
---



```jsx
import React, { useState,useEffect,useRef } from 'react';
import ReactDOM from 'react-dom';
import { YwFormDialog,YwButton } from '@ywfe/yw-design';
import 'antd/dist/antd.css';

const items=[
    {
        title: '标题',
        name: 'title',
        component: 'Input',
        type: 'string',
    },
    {
        title: '状态',
        name: 'status',
        component: 'Select',
        required: true,
        type: 'string',
        enum: [
            { value: 1, label: '处理中' },
            { value: 2, label: '审批通过' },
        ],
        componentProps: {},
    },
];
const layoutProps = { labelCol: 4, wrapperCol: 20 };




const App = () => {
  const [visible,setVisible] = useState(false)
  const onConfirm = (values)=>{
    setVisible(false)
  }
  const onOpen = async ()=>{
        return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                title:'标题'
            })
        }, 1500)
    })
  }
    return (
      <div>
        <YwButton btnText='打开弹窗' onClick={()=>{setVisible(true)}} type='primary' />
        <YwFormDialog 
          visible={visible} 
          title='编辑' 
          items={items} 
          onOpen={onOpen}
          layoutProps={layoutProps} 
          onConfirm={onConfirm} 
          onCancel={()=>{setVisible(false)}}
        />
      </div>
    );
}

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