Question

我在React JS中有多步注册表。我的主要内容如下：

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actionCreators from '../../actions/actionCreators';
import countries from '../../data/countries';

import RegistrationFormStepOne from './registrationFormStepOne';
import RegistrationFormStepTwo from './registrationFormStepTwo';
import RegistrationFormStepThree from './registrationFormStepThree';
import RegistrationFormStepFour from './registrationFormStepFour';

class RegistrationPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: Object.assign({}, this.props.userData),
            fileNames: {},
            selectedFile: {},
            icons: {
                idCard: 'upload',
                statuten: 'upload',
                blankLetterhead: 'upload',
                companyPhoto: 'upload'
            },
            step: 1,
            errors: {}
        };

        this.setUser = this.setUser.bind(this);
        this.onButtonClick = this.onButtonClick.bind(this);
        this.onButtonPreviousClick = this.onButtonPreviousClick.bind(this);
    }

    getCountries(){
        return countries;
    }

    setUser(event) {
        const field = event.target.name;
        const value = event.target.value;

        let user = this.state.user;
        user[field] = value;
        this.setState({user: user});
    }

    onButtonClick(name, event) {
        event.preventDefault();
        this.props.actions.userRegistration(this.state.user);
        switch (name) {
            case "stepFourConfirmation":
                this.setState({step: 1});
                break;
            case "stepTwoNext":
                this.setState({step: 3});
                break;
            case "stepThreeFinish":
                this.setState({step: 4});
                break;
            default:
                this.setState({step: 2});
        }
    }

    onButtonPreviousClick(){
        this.setState({step: this.state.step - 1});
    }

    render() {
        const languageReg = this.props.currentLanguage.default.registrationPage;

        let formStep = '';
        let step = this.state.step;
        switch (step) {
            case 1:
                formStep = (<RegistrationFormStepOne user={this.props.userData}
                                                     onChange={this.setUser}
                                                     onButtonClick={this.onButtonClick}
                                                     countries={this.getCountries(countries)}
                                                     errors={this.state.errors}
                                                     step={step}/>);
                break;
            case 2:
                formStep = (<RegistrationFormStepTwo user={this.props.userData}
                                                     onChange={this.setUser}
                                                     onButtonClick={this.onButtonClick}
                                                     onButtonPreviousClick={this.onButtonPreviousClick}
                                                     errors={this.state.errors}/>);
                break;
            case 3:
                formStep = (<RegistrationFormStepThree user={this.props.userData}
                                                       onFileChange={this.onFileChange}
                                                       onButtonClick={this.onButtonClick}
                                                       onButtonPreviousClick={this.onButtonPreviousClick}
                                                       errors={this.state.errors}
                                                       fileNames={this.state.fileNames}
                                                       icons={this.state.icons}
                                                       fileChosen={this.state.selectedFile}/>);
                break;

            default:
                formStep = (<RegistrationFormStepFour user={this.props.userData}
                                                      onChange={this.setUser}
                                                      onChangeCheckboxState={this.changeCheckboxState}
                                                      onButtonClick={this.onButtonClick}
                                                      onButtonPreviousClick={this.onButtonPreviousClick}
                                                      errors={this.state.errors}/>);
        }

        return (
            <div className="sidebar-menu-container" id="sidebar-menu-container">

                <div className="sidebar-menu-push">

                    <div className="sidebar-menu-overlay"></div>

                    <div className="sidebar-menu-inner">
                        <div className="contact-form">
                            <div className="container">
                                <div className="row">
                                    <div className="col-md-10 col-md-offset-1 col-md-offset-right-1">
                                        {React.cloneElement(formStep, {currentLanguage: languageReg})}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

RegistrationPage.contextTypes = {
    router: PropTypes.object
};

function mapStateToProps(state, ownProps) {
    return {
        userData: state.userRegistrationReducer
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actionCreators, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(RegistrationPage);

当我单击Next时，状态步骤会更改，下一个表单步骤将是renderen。当我点击上一步时，步骤减少，我看到上一步。它适用于那些按钮。

但浏览器后退按钮不起作用。当我在第三步时，当我点击浏览器中的后退按钮时，我被重定向到主页。

我的routes.js文件如下：

    import React from 'react';
import {IndexRoute, Route} from 'react-router';

import App from './components/App';
import HomePage from './components/HomePage';
import Registration from './components/registration/RegistrationPage';
import RegistrationStepOne from './components/registration/registrationFormStepOne';
import RegistrationStepTwo from './components/registration/registrationFormStepTwo';
import RegistrationStepThree from './components/registration/registrationFormStepThree';
import RegistrationStepFour from './components/registration/registrationFormStepFour';
import UserPage from './components/user/userHome';
import requireAuth from './common/highOrderComponents/requireAuth';
import hideIfLoggedIn from './common/highOrderComponents/hideIfLoggedIn';

import PasswordReset from './common/passwordReset';

const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={HomePage}/>
        <Route path="registration" component={hideIfLoggedIn(Registration)} />
        <Route path="reset-password" component={PasswordReset} />
        <Route path="portal" component={requireAuth(UserPage)} />
    </Route>
);

export default routes;

我应该在<Route path="registration" ...中添加这些组件，我尝试过，但没有成功。

有关如何使浏览器返回按钮工作并让我回到上一步的任何建议吗？

修改

Mu routes.js文件现在如下：

const routes = (
<Route path="/" component={App}>
    <IndexRoute component={HomePage}/>
    <Route path="registration/:id" component={hideIfLoggedIn(Registration)}/>
    <Route path="reset-password" component={PasswordReset} />
    <Route path="portal" component={requireAuth(UserPage)} />
</Route>
);

在我的主要组件中，我已将onButtonClick功能（步骤递增）改为：

onButtonClick(name, event) {
    event.preventDefault();

    switch (name) {
        case "stepFourConfirmation":
            if(this.validation("four")) {
                this.props.actions.userRegistrationThunk(this.state.user);
                this.setState({step: 5, user: {}});
            }
            break;
        case "stepTwoNext":
            if(this.validation("two")) {
                this.setState({step: 3});
                this.context.router.push("stepThree");
            }
            break;
        case "stepThreeFinish":
            this.setState({step: 4});
            break;
        default:
            if(this.validation("one")) {
                this.setState({step: 2});
                this.context.router.push('stepTwo');
            }
    }
}

我已添加

componentWillMount(){
    console.log(this.props.params.id);
}

如果单击浏览器后退按钮，我会减少步骤。

当主要组件第一次加载时，我进入控制台stepOne，这很好。但是当我点击下一个按钮时，转到第二步。 url更改为registration / stepTwo，但在控制台中我得到警告：[react-router] Location＆＃34; stepTwo＆＃34;没有匹配任何路线，我看不出我的this.props.params.id。

有什么建议吗？

Answer 1

这是因为您正在管理组件内的步骤而不是路由。您已经更改了注册页面的路径

const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={HomePage}/>
        <Route path="registration/:id" component={hideIfLoggedIn(Registration)} >
</Route
        <Route path="reset-password" component={PasswordReset} />
        <Route path="portal" component={requireAuth(UserPage)} />
    </Route>
);

同时clickin incrementStep更改路径/ registration / 1，并且组件内部的id可用作this.props.params.id

后退按钮在React

1 个答案: