@aliretail/react-materials-components/demo/FormulaInput/schemaform.md

B 端物料组件库

---
title: ImageText-Simple
order: 2
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FormulaInput, FormComponents } from '@aliretail/react-materials-components';
import configList from './test-data/configList';

const { setup, SchemaForm, SchemaMarkupField: Field } = FormComponents;

setup();

const App = () => {
  return (
    <SchemaForm
      components={{
        FormulaInput,
      }}
      // 监听每个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': 'FormulaInput',
                'x-component-props': {
                  configList,
                  dialogTitle: '编辑公式',
                },
              },
            },
          },
        },
      }}
    />
  );
};

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