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

B 端物料组件库

---
title: GridLayout filter布局组件
order: 10
---

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const {
  setup,
  SchemaForm,
  SchemaMarkupField: Field,
  FormButtonGroup,
  Submit,
  Reset,
} = 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': {
              // 一行几个 input
              cols: 4,
              alwaysShowItems: false,
              buttons: {
                render: () => (
                  <FormButtonGroup>
                    <Submit>提交</Submit>
                    <Reset>重置</Reset>
                  </FormButtonGroup>
                ),
              },
            },
            properties: {
              name: {
                title: '姓名',
                'x-component': 'Input',
              },
              age: {
                title: '年龄',
                'x-component': 'input',
                'x-component-props': {
                  placeholder: '请输入您的年龄',
                },
              },
              age11: {
                title: '年龄',
                'x-component': 'input',
                'x-component-props': {
                  placeholder: '请输入您的年龄',
                },
              },
              age12: {
                title: '年龄',
                'x-component': 'input',
                'x-component-props': {
                  placeholder: '请输入您的年龄',
                },
              },
              age13: {
                title: '年龄',
                'x-component': 'input',
                'x-component-props': {
                  placeholder: '请输入您的年龄',
                },
              },
              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: '基础帮助信息',
                },
              },
              age1: {
                title: '年龄1',
                'x-component': 'Input',
                'retail-form-item-props': {
                  emphasizeExplanation: true,
                  explanation: '基础帮助信息',
                },
              },
              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: '这里是输入额外提示信息',
                },
              },
              createTime: {
                title: '创建时间',
                'x-component': 'RangeDatePicker',
              },
            },
          },
        },
      }}
    />
  );
};

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