@aliretail/react-materials-components/demo/FormComponents/childContainer.md

B 端物料组件库

---
title: ChildContainer
order: 170
---

请在 GridLayout 布局中设置 align: 'left'参数，使排版靠左
布局居中的情况下暂无 ChildContainer 场景

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alife/next';
import PowerEditor from '../../src/FormComponents/powerEditor';
import { FormComponents } from '@aliretail/react-materials-components';
const { setup, SchemaForm, SchemaMarkupField: Field, FormButtonGroup } = FormComponents;

setup({
  PowerEditor,
});

const App = () => {
  const [editable, setEditable] = useState(true);
  const [isPreview, setPreview] = useState(false);
  const [disabled, setDisabled] = useState(false);

  const extConfig = {
    isPreview,
    disabled,
  };

  return (
    <>
      <SchemaForm
        defaultValue={{
          age: 'label不显示内容情况',
          age1: 'isPreview状态',
          card: 'card',
          numberPicker: 111,
          numberPicker1: 222,
          datePicker: '2020-12-02',
          radioGroup: '2',
          rangeDatePicker: ['2020-12-03', '2021-01-13'],
          weekDatePicker: '2020-49th',
          monthDatePicker: '2020-02',
          yearDatePicker: '2022',
          kind: 'a',
          PowerEditor: '富文本框内容<br/> preview状态未在业务中出现，所以未和ui统一规范',
        }}
        editable={editable}
        // 监听每个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,
                align: 'left',
              },
              properties: {
                childContainer: {
                  'x-component': 'ChildContainer',
                  title: '产品描述规格',
                  required: true,
                  properties: {
                    card: {
                      title: <div style={{ color: 'red' }}>自定义标题</div>,
                      required: true,
                      'x-component': 'Input',
                      'retail-form-item-props': {
                        addonTextAfter: '后字',
                        inputAreaWidth: 200,
                      },
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    numberPicker: {
                      'x-component': 'NumberPicker',
                      title: 'NP',
                      'retail-form-item-props': {
                        emphasizeExplanation: true,
                        explanation: '基础帮助信息',
                        addonTextAfter: '后面添加的文字',
                        inputAreaWidth: 200,
                      },
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    numberPicker1: {
                      'x-component': 'NumberPicker',
                      title: 'NumberPicker',
                      'retail-form-item-props': {
                        addonTextAfter: '后面添加的文字',
                      },
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    datePicker: {
                      'x-component': 'DatePicker',
                      title: 'DatePicker',
                      'x-component-props': {
                        type: 'array',
                        title: 'DatePicker',
                        ...extConfig,
                      },
                    },
                    rangeDatePicker: {
                      'x-component': 'rangeDatePicker',
                      title: 'RangeDatePicker',
                      'x-component-props': {
                        type: 'array',
                        title: 'RangeDatePicker',
                        ...extConfig,
                      },
                    },
                    weekDatePicker: {
                      'x-component': 'weekDatePicker',
                      title: 'weekDatePicker',
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    monthDatePicker: {
                      'x-component': 'monthDatePicker',
                      title: 'monthDatePicker',
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    yearDatePicker: {
                      'x-component': 'yearDatePicker',
                      title: 'yearDatePicker',
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    kind: {
                      title: '类目',
                      enum: ['a', 'b', 'c'],
                      required: true,
                      'x-component': 'Select',
                      'retail-form-item-props': {
                        explanation: '基础帮助信息',
                        inputAreaWidth: 's',
                      },
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    age1: {
                      title: '年龄1',
                      'x-component': 'Input',
                      'retail-form-item-props': {
                        emphasizeExplanation: true,
                        explanation: '基础帮助信息',
                      },
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    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,
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                    PowerEditor: {
                      'x-component': 'PowerEditor',
                      title: '商品文描',
                      'x-component-props': {
                        ...extConfig,
                      },
                    },
                  },
                },
                age: {
                  title: 'title',
                  'x-component': 'input',
                  required: true,
                  'x-component-props': {
                    placeholder: '请输入您的年龄',
                    ...extConfig,
                  },
                },
              },
            },
          },
        }}
      />
      <Button
        onClick={() => {
          setEditable(!editable);
        }}
        disabled={isPreview || disabled}
      >
        切换{editable ? 'readonly' : '编辑'}状态
      </Button>

      <Button
        onClick={() => {
          setPreview(!isPreview);
        }}
        disabled={!editable || disabled}
      >
        切换{isPreview ? '编辑' : 'isPreview'}状态
      </Button>

      <Button
        onClick={() => {
          setDisabled(!disabled);
        }}
        disabled={!editable || isPreview}
      >
        切换{disabled | isPreview ? '编辑' : 'disabled'}状态
      </Button>
    </>
  );
};

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