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

B 端物料组件库

---
title: UnstableFormStep
order: 180
---

Formily next-components 能力补足

```jsx
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import { FormComponents } from '@aliretail/react-materials-components';
const {
  setup,
  SchemaForm,
  SchemaMarkupField: Field,
  createFormActions,
  FormEffectHooks,
  FormButtonGroup,
  Submit,
} = FormComponents;
import UnstableFormStep from '../../src/FormComponents/unstableFormStep';

setup();

const { onFormInit$ } = FormEffectHooks;

const actions = createFormActions();

let cache = {};

function App() {
  return (
    <SchemaForm
      onSubmit={(values) => {
        console.log('提交');
        console.log(values);
      }}
      actions={actions}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 6 }}
      validateFirst
      effects={({ setFieldState, getFormGraph }) => {
        onFormInit$().subscribe(() => {
          setFieldState('col1', (state) => {
            state.visible = false;
          });
        });
      }}
    >
      <Field
        type="object"
        x-component="step"
        x-component-props={{
          style: { marginBottom: 20 },
          dataSource: [
            { title: 'Step1', name: 'step-1' },
            { title: 'Step2', name: 'step-2' },
            { title: 'Step3', name: 'step-3' },
          ],
        }}
      />
      <Field
        name="step-1"
        type="object"
        x-component="Card"
        x-component-props={{
          title: 'Step1',
        }}
      >
        <Field name="a1" required title="A1" x-component="Input" />
      </Field>
      <Field
        name="step-2"
        type="object"
        x-component="Card"
        x-component-props={{
          title: 'Step2',
        }}
      >
        <Field name="a2" required title="A2" x-component="Input" />
      </Field>
      <Field
        name="step-3"
        type="object"
        x-component="Card"
        x-component-props={{
          title: 'Step3',
        }}
      >
        <Field name="a3" required title="A3" x-component="Input" />
      </Field>
      <FormButtonGroup>
        <Submit>提交</Submit>
        <Button onClick={() => actions.dispatch(UnstableFormStep.ON_FORM_STEP_PREVIOUS)}>
          上一步
        </Button>
        <Button onClick={() => actions.dispatch(UnstableFormStep.ON_FORM_STEP_NEXT)}>下一步</Button>
        <Button
          onClick={() => {
            cache = actions.getFormGraph();
          }}
        >
          存储当前状态
        </Button>
        <Button
          onClick={() => {
            actions.setFormGraph(cache);
          }}
        >
          回滚状态
        </Button>
      </FormButtonGroup>
    </SchemaForm>
  );
}

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