提交 db5f1e12ca8cae5677336cfe46c0ebcdb95165e3

作者 愚道
1 个父辈 b30f6746

fix step routes error when add to a project

1 1 import React, { Fragment } from 'react';
2 2 import { connect } from 'dva';
3 3 import { Form, Input, Button, Select, Divider } from 'antd';
4   -import router from 'umi/router';
5 4 import styles from './index.less';
6 5
7 6 const { Option } = Select;
... ... @@ -30,7 +29,10 @@ class Step1 extends React.PureComponent {
30 29 type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
31 30 payload: values,
32 31 });
33   - router.push('/confirm');
  32 + dispatch({
  33 + type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
  34 + payload: 'confirm',
  35 + });
34 36 }
35 37 });
36 38 };
... ...
1 1 import React from 'react';
2 2 import { connect } from 'dva';
3 3 import { Form, Input, Button, Alert, Divider } from 'antd';
4   -import router from 'umi/router';
5 4 import { digitUppercase } from '../../utils/utils';
6 5 import styles from './index.less';
7 6
... ... @@ -24,7 +23,10 @@ class Step2 extends React.PureComponent {
24 23 const { form, data, dispatch, submitting } = this.props;
25 24 const { getFieldDecorator, validateFields } = form;
26 25 const onPrev = () => {
27   - router.push('info');
  26 + dispatch({
  27 + type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
  28 + payload: 'info',
  29 + });
28 30 };
29 31 const onValidateForm = e => {
30 32 e.preventDefault();
... ...
1 1 import React, { Fragment } from 'react';
2 2 import { connect } from 'dva';
3 3 import { Button, Row, Col } from 'antd';
4   -import router from 'umi/router';
5 4 import { Result } from 'ant-design-pro';
6 5 import styles from './index.less';
7 6
... ... @@ -10,9 +9,12 @@ import styles from './index.less';
10 9 }))
11 10 class Step3 extends React.PureComponent {
12 11 render() {
13   - const { data } = this.props;
  12 + const { data, dispatch } = this.props;
14 13 const onFinish = () => {
15   - router.push('info');
  14 + dispatch({
  15 + type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
  16 + payload: 'info',
  17 + });
16 18 };
17 19 const information = (
18 20 <div className={styles.information}>
... ...
1 1 import React, { PureComponent, Fragment } from 'react';
2 2 import { Card, Steps } from 'antd';
  3 +import { connect } from 'dva';
3 4 import PageHeaderWrapper from './components/PageHeaderWrapper';
4 5 import Step1 from './components/Step1';
5 6 import Step2 from './components/Step2';
... ... @@ -8,12 +9,13 @@ import styles from './style.less';
8 9
9 10 const { Step } = Steps;
10 11
11   -export default class StepForm extends PureComponent {
  12 +@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
  13 + current: BLOCK_NAME_CAMEL_CASE.current,
  14 +}))
  15 +class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
12 16 getCurrentStep() {
13   - const { location } = this.props;
14   - const { pathname } = location;
15   - const pathList = pathname.split('/');
16   - switch (pathList[pathList.length - 1]) {
  17 + const { current } = this.props;
  18 + switch (current) {
17 19 case 'info':
18 20 return 0;
19 21 case 'confirm':
... ... @@ -26,33 +28,33 @@ export default class StepForm extends PureComponent {
26 28 }
27 29
28 30 render() {
29   - const { location } = this.props;
30   - const { pathname } = location;
31   - let currentStep = null;
32   - if (/confirm\/?$/.test(pathname)) {
33   - currentStep = <Step2 />;
34   - } else if (/result\/?$/.test(pathname)) {
35   - currentStep = <Step3 />;
  31 + const currentStep = this.getCurrentStep();
  32 + let stepComponent;
  33 + if (currentStep === 1) {
  34 + stepComponent = <Step2 />;
  35 + } else if (currentStep === 2) {
  36 + stepComponent = <Step3 />;
36 37 } else {
37   - currentStep = <Step1 />;
  38 + stepComponent = <Step1 />;
38 39 }
39 40 return (
40 41 <PageHeaderWrapper
41 42 title="分步表单"
42   - tabActiveKey={location.pathname}
43 43 content="将一个冗长或用户不熟悉的表单任务分成多个步骤,指导用户完成。"
44 44 >
45 45 <Card bordered={false}>
46 46 <Fragment>
47   - <Steps current={this.getCurrentStep()} className={styles.steps}>
  47 + <Steps current={currentStep} className={styles.steps}>
48 48 <Step title="填写转账信息" />
49 49 <Step title="确认转账信息" />
50 50 <Step title="完成" />
51 51 </Steps>
52   - {currentStep}
  52 + {stepComponent}
53 53 </Fragment>
54 54 </Card>
55 55 </PageHeaderWrapper>
56 56 );
57 57 }
58 58 }
  59 +
  60 +export default PAGE_NAME_UPPER_CAMEL_CASE;
... ...
1   -import { routerRedux } from 'dva/router';
2 1 import { fakeSubmitForm } from './service';
3 2
4 3 export default {
5 4 namespace: 'BLOCK_NAME_CAMEL_CASE',
6 5
7 6 state: {
  7 + current: 'info',
8 8 step: {
9 9 payAccount: 'ant-design@alipay.com',
10 10 receiverAccount: 'test@example.com',
... ... @@ -20,11 +20,21 @@ export default {
20 20 type: 'saveStepFormData',
21 21 payload,
22 22 });
23   - yield put(routerRedux.push('result'));
  23 + yield put({
  24 + type: 'saveCurrentStep',
  25 + payload: 'result',
  26 + });
24 27 },
25 28 },
26 29
27 30 reducers: {
  31 + saveCurrentStep(state, { payload }) {
  32 + return {
  33 + ...state,
  34 + current: payload,
  35 + };
  36 + },
  37 +
28 38 saveStepFormData(state, { payload }) {
29 39 return {
30 40 ...state,
... ...
注册登录 后发表评论