javascript - redux-form onSubmit menyegarkan semula halaman

Saya baru dalam redux-form dan saya menghadapi masalah pelik dengan pengendalian onSubmit.

Apabila saya menyediakan projek saya tepat seperti dalam contoh redux-form di sini http://redux-form.com/6.7.0/examples/syncValidation/ ia berfungsi seperti yang diharapkan. Saya telah mencuba untuk mengembangkan contoh ini mengikut keperluan saya dan telah mengesahkan bahawa ia berfungsi seperti yang diharapkan apabila ia memuatkan borang seperti berikut: komponen laluan > borang.

Masalah timbul apabila saya cuba memuatkan borang dalam komponen react yang dimuatkan melalui laluan (komponen laluan > komponen bekas > borang). Apabila saya klik hantar, nilai medan ditambah ke bar alamat dan pengesahan borang tidak dijalankan. Saya telah mencuba segala-galanya yang terlintas dalam fikiran saya untuk memperbaikinya. Kod yang diberikan di bawah akan berfungsi dengan betul jika anda menggantikan <Main /> dengan <RegisterForm handleSubmit={showResults} /> dalam index.js. Ada idea di mana saya melakukan kesilapan di sini?

BorangDaftar.js:

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
    const errors = {};

    if (!values.name) {
        errors.name = 'Required';
    } else if (values.name.length <= 2) {
        errors.username = 'Must be 2 characters or more';
    } else if (values.name.length > 50) {
        errors.username = 'Must be 50 characters or less';
    }

    if (!values.email) {
        errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]    {2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
    }

    if (!values.password) {
        errors.password = 'Required';
    } else if (!values.confirm) {
        errors.confirm = 'Required';
    } else if (values.password !== values.confirm) {
        errors.confirm = 'Passwords do not match';
    }
    return errors;
};
const renderField = ({ input, label, type, id, meta: { touched, error, warning } }) => (
    <div>
        <label htmlFor={id}>{label}</label>
        <div>
            <input {...input} id={id} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
    </div>
);

const RegisterForm = (props) => {
    const { handleSubmit, pristine, reset, submitting } = props
    return (
        <form onSubmit={handleSubmit}>
            <div className="row">
                <div className="medium-6 columns medium-centered">
                    <Field type="text" id="name" name="name" component={renderField} placeholder="name" label="Name" />
                </div>
                <div className="medium-6 columns medium-centered">
                    <Field type="text" id="email" name="email" component={renderField} placeholder="email" label="Email" />
                </div>
                <div className="medium-6 columns medium-centered">
                    <Field type="password" id="password" name="password" component={renderField} placeholder="password" label="Password" />
                </div>
                <div className="medium-6 columns medium-centered">
                    <Field type="password" id="confirm" name="confirm" component={renderField} placeholder="confirm" label="Confirm password" />
                </div>
                <div className="medium-6 columns medium-centered">
                    <button type="submit" disabled={submitting}>Submit</button>
                </div>
            </div>
        </form>
    );
};

export default reduxForm({
  form: 'register',  // a unique identifier for this form
  validate, 
})(RegisterForm);

Index.js(berfungsi):

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { HashRouter as Router, hashHistory } from 'react-router-dom';
const store = require('./store').configure();
import RegisterForm from './RegisterForm.jsx';
import Main from './Main.jsx';

const rootEl = document.getElementById('app'); 

const showResults = (values) => {
  window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <div style={{ padding: 15 }}>
        <h2>Synchronous Validation</h2>
        <RegisterForm handleSubmit={showResults} />
      </div>
    </Router>
  </Provider>,
  rootEl,
);

Index.js(tidak berfungsi):

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { HashRouter as Router, hashHistory } from 'react-router-dom';
const store = require('./store').configure();
import RegisterForm from './RegisterForm.jsx';
import Main from './Main.jsx';

const rootEl = document.getElementById('app'); 

const showResults = (values) => {
  window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <div style={{ padding: 15 }}>
        <h2>Synchronous Validation</h2>
        <Main />
      </div>
    </Router>
  </Provider>,
  rootEl,
);

Main.js:

import React, { Component } from 'react';
import RegisterForm from './RegisterForm.jsx';

const showResults = (values) => {
  window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
};

class Register extends Component {
    render() {
        return (
            <RegisterForm handleSubmit={showResults} />
        );
    }
}

export default Register;

Jawapan #1

Anda sepatutnya menghantar pengendali serahan anda ke dalam prop onSubmit, bukan handleSubmit. Ia datang ke dalam komponen borang anda sebagai handleSubmit, jadi kod itu sepatutnya okay.

class Register extends Component {
    render() {
        return (
            //change this
            <RegisterForm onSubmit={showResults} />
        );
    }
}