@aliretail/react-materials-components/demo/FormComponents/gridLayout-form-dialog.md

B 端物料组件库

---
title: GridLayout 表单布局组件 弹窗
order: 11
---

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Button, Dialog } from '@alife/next';
import { FormComponents } from '@aliretail/react-materials-components';
const { setup, SchemaForm } = FormComponents;

setup();

const App = () => {
  const [dialogVisible, setDialogVisible] = useState(false);

  const onClose = () => {
    setDialogVisible(false);
  };

  return (
    <>
      <Dialog
        title="Welcome to Alibaba.com"
        visible={dialogVisible}
        onOk={onClose}
        onCancel={onClose}
        onClose={onClose}
        style={{ width: '500px' }}
      >
        <SchemaForm
          defaultValue={{
            age1: '133',
            radioGroup: '2',
          }}
          // 监听每个input内容修改
          onChange={console.log}
          // 监听Submit的点击事件
          onSubmit={(e) => {
            // 可以在这里访问接口
            console.log(e);
          }}
          schema={{
            type: 'object',
            properties: {
              gridLayout: {
                type: 'object',
                'x-component': 'GridLayout',
                'x-component-props': {
                  isForm: true,
                  type: 'dialog',
                },
                properties: {
                  friend: {
                    'x-component': 'NumberPicker',
                    title: '金额',
                    'retail-form-item-props': {
                      emphasizeExplanation: true,
                      addonTextAfter: '后面添加的文字',
                      inputAreaWidth: 200,
                    },
                  },
                  kind: {
                    title: '类目',
                    enum: ['a', 'b', 'c'],
                    required: true,
                    'x-component': 'Select',
                    'retail-form-item-props': {
                      explanation: '基础帮助信息',
                      inputAreaWidth: 's',
                    },
                  },
                  age1: {
                    title: '年龄1',
                    'x-component': 'Input',
                    'retail-form-item-props': {
                      emphasizeExplanation: true,
                      explanation: '基础',
                    },
                  },
                  radioGroup: {
                    title: 'radio 按钮',
                    'x-component': 'RadioGroup',
                    enum: [
                      { label: 'One', value: '1' },
                      { label: 'Two', value: '2' },
                      { label: 'Three', value: '3' },
                      { label: 'Four', value: '4' },
                    ],
                    required: true,
                  },
                },
              },
            },
          }}
        />
      </Dialog>
      <Button
        onClick={() => {
          setDialogVisible(true);
        }}
      >
        显示弹窗
      </Button>
    </>
  );
};

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