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

B 端物料组件库

---
title: GridLayout 表单布局组件 默认居中
order: 13
---

在 GridLayout 布局中设置 isForm: true 参数，则排版则根据 aliretail-form 的标准形式来

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { setup, SchemaForm, SchemaMarkupField: Field, FormButtonGroup } = FormComponents;

setup();

const App = () => {
  return (
    <SchemaForm
      defaultValue={{
        age: '233',
        age1: '133',
      }}
      // 监听每个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,
            },
            properties: {
              name: {
                title: '姓名',
                'x-component': 'Input',
                'x-component-props': {
                  display: false,
                },
              },
              switch: {
                title: 'switch',
                'x-component': 'Switch',
              },
              rangeDatePicker: {
                'x-component': 'rangeDatePicker',
                title: 'RangeDatePicker',
                'x-component-props': {
                  type: 'array',
                  title: 'RangeDatePicker',
                  name: '[start,end]',
                },
              },
              age: {
                title: '年龄',
                'x-component': 'Input',
                'x-component-props': {
                  placeholder: '请输入您的年龄',
                },
                'retail-form-item-props': {
                  addonTextAfter: '后面添加的文字',
                },
              },
              card: {
                title: <div style={{ color: 'red' }}>自定义标题</div>,
                required: true,
                'x-component': 'Input',
              },
              kind: {
                title: '类目',
                enum: ['a', 'b', 'c'],
                required: true,
                'x-component': 'Select',
                'retail-form-item-props': {
                  explanation: '基础帮助信息',
                  inputAreaWidth: 200,
                },
              },
              age1: {
                title: '年龄1',
                'x-component': 'Input',
                'retail-form-item-props': {
                  emphasizeExplanation: true,
                  explanation: '基础帮助信息',
                  inputAreaWidth: 's',
                },
              },
              age2: {
                title: '年龄2',
                'x-component': 'Input',
                'retail-form-item-props': {
                  showTipsExpand: true,
                  emphasizeExplanation: true,
                  explanation: '基础帮助信息基础帮助信息基础帮助信息',
                },
              },
              age3: {
                title: '年龄3',
                'x-component': 'Input',
                required: true,
                'retail-form-item-props': {
                  extra: '这里是输入额外提示信息',
                },
              },
            },
          },
        },
      }}
    />
  );
};

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