单击“下一步”按钮不会将其带到下一页

时间:2016-11-11 04:27:31

标签: reactjs ecmascript-6 redux

   import React from 'react';
    import { Link } from 'react-router';
    import { Field } from 'redux-form'; 
    import BaseForm from '..//BaseForm';  
    export default class XXXXXXX extends BaseForm {

   componentWillMount() {
        this.props.retrieveAcademies();
    }  
        render() {
            const {
                handleSubmit,
                formatGraduationDate,
                pristine,
                submitting,
                infoError,
                acadamyId             

            } = this.props;
            return (
                <div className="col-md-8 col-lg-8 mscs-text">
                    <div>
                        <h1 className="mscs-head">Self Registration </h1> <hr />

                        <form onSubmit={handleSubmit(this.props.startRegistrationProcess.bind(this))} className="registration-step1Class">

                            <div className="form-section">
                                <label htmlFor="firstName">First Name:</label>
                                <Field name="firstName" component={this.renderInputield} label="Enter first Name:" />
                            </div>
                            <div className="form-section">
                                <label htmlFor="lastName">Last Name:</label>
                                <Field name="lastName" component={this.renderInputield} label="Enter last Name:" />
                            </div>
                            <div id="datetimepicker2" className="form-section">
                                <label htmlFor="dob">Date of Birth:</label>
                                <Field name="dob" component={this.renderReactDatePicker} type="text" />
                            </div>

                            <div className="form-section">   
                                  <label htmlFor="maritimeAcadamy">Maritime Academy:</label>
                                {this.renderAcademiesSelection(acadamyId)}             
                            </div>

                            <div className="form-section">
                                <label htmlFor="Yearpassed">Year Passed:</label>
                                <Field name="passedYear"
                                component={this.renderReactDatePicker}
                                    type="text"
                                    formatDate={formatGraduationDate}
                                    />
                            </div>
                            <br />
                            <div className="form-section">
                                <label htmlFor="CustomerNumber">Customer ID:</label>
                                <Field name="CustomerNumber" component={this.renderInputield} type="text" label="Enter Customer ID:" />
                            </div>

                            <div className="error validation-error">
                                {infoError && infoError.error} <br />
                            </div>

                            <input type="submit" className="btn btn-success" value="Next" />
                            <input type="reset" className="btn btn-default" value="Cancel" />

                        </form>

                    </div>
                </div>
            );
        }  
        renderAcademiesSelection(acadamyId) {
            return (
                <div>
                    <select className="form-control" {...acadamyId}>
                    <option key={0} value={''}>{'Select your academy'}</option>
                    {
                        this.props.academies && this.props.academies.map(function (item, index) {
                            return (
                                <option key={item.Id} value={item.Id}>{item.Name}</option>
                            );
                        })
                    }
                </select>
            </div>
        );
    }
    }

这是组件。下面是容器。该代码包含一些文本框和下拉列表以及日历控件。

容器:

function mapStateToProps(state, ownProps) {
    return {
        academies: state.academies.academies,
        infoError: state.signUp.error
    };
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        retrieveAcademies: () => {
            dispatch(retrieveAcademies());
        },
        startRegistrationProcess: dispatchGenerateRegistrationToken.bind(this),
        nextPage: ownProps.nextPage,

    }
}

以上代码示例是我的反应组件和容器。当我点击 Next 按钮时,它没有带我进入下一步,它没有在控制台中显示任何类型的错误。我不知道错误究竟在哪里。我无法调试,因为控制台没有给出任何类型的错误。这里有任何帮助。

0 个答案:

没有答案