---
title: 新建 
order: 1
---

受控模式下 visible 和 confirmLoading需外部传入，
非受控模式下 onConfirm 返回promise 内部处理visible和confirmLoading

```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 formRef = useRef(null);

    return (
      <div>
        <YwButton btnText='打开弹窗' onClick={()=>{setVisible(true)}} type='primary' />
        <YwFormDialog 
          visible={visible} 
          title='新建活动' 
          items={items} 
          confirmLoading={false}
          onFormInit={(_form)=>{formRef.current = _form}}
          layoutProps={layoutProps} 
          initialValues={{title:1111}} 
          onConfirm={onConfirm} 
          onCancel={()=>{setVisible(false)}}
        />
      </div>
    );
}

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