redux-form onSubmit aktualisiert Seite

Question

Ich bin neu in Redux-Form und ich habe ein seltsames Problem mit der Handhabung onSubmit.

Wenn ich mein Projekt genau wie in der Redux-Form-Beispiel hier http://redux-form.com/6.7.0/examples/syncValidation/ einrichten funktioniert es wie erwartet. Ich habe versucht, dieses Beispiel für meine Bedürfnisse zu erweitern und bestätigt, dass es wie erwartet funktioniert, wenn es das Formular wie folgt lädt: route component> form.

Das Problem tritt auf, wenn ich versuche, das Formular innerhalb einer Reaktionskomponente zu laden, die über eine Route geladen wird (Routenkomponente> Containerkomponente> Formular). Wenn ich auf "Senden" klicke, werden die Feldwerte zur Adressleiste hinzugefügt und die Formularvalidierung wird nicht ausgeführt. Ich habe absolut alles versucht, was ich mir vorstellen kann, um das zu beheben. Der unten angegebene Code funktioniert ordnungsgemäß, wenn Sie in index.js <Main /> durch <RegisterForm handleSubmit={showResults} /> ersetzen. Irgendwelche Ideen, wo ich hier falsch liege?

RegisterForm.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 (Werke):

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 (nicht funktioniert):

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; 

Answer 1

Sie sollten Ihren Submit-Handler an die Property onSubmit übergeben, nicht handleSubmit. Es kommt in Ihre Formularkomponente als handleSubmit, so dass der Code in Ordnung sein sollte.

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