提交 db5f1e12ca8cae5677336cfe46c0ebcdb95165e3

作者 愚道
1 个父辈 b30f6746

fix step routes error when add to a project

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