Sie müssen entweder handleSubmit() eine onSubmit-Funktion übergeben oder onSubmit als Prop | übergeben Redux-Formulare

Question

Ich möchte ein einfaches Formular erstellen, das eine E-Mail-Adresse aufnimmt und später zu unserer Datenbank hinzufügt. Ich bin mit React Forms gegangen, weil es den gesamten Entwicklungsprozess erleichtert und den Zeitaufwand reduziert.

aber wenn ich versuche, meine Form erhalte ich diesen Fehler POST: Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Hier ist mein AddUserForm.js:

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

const AddUserForm = ({ handleSubmit }) => { 
    return (
    <form onSubmit={handleSubmit}> 
     <div> 
     <Field name="email" component="input" type="email" /> 
     </div> 
     <button type="submit">Bjud in</button> 
    </form> 
) 
} 
export default reduxForm({ 
    form: 'addUser' 
})(AddUserForm) 

Hier ist meine addUserAction:

import axios from 'axios' 
import settings from '../settings' 

axios.defaults.baseURL = settings.hostname 

export const addUser = email => { 
    return dispatch => { 
    return axios.post('/invite', { email: email }).then(response => { 
     console.log(response) 
    }) 
    } 
} 

Und hier ist meine AddUserContainer.js :

import React, { Component } from 'react' 
import { addUser } from '../../actions/addUserAction' 
import AddUserForm from './Views/AddUserForm' 
import { connect } from 'react-redux' 

class AddUserContainer extends Component { 
    submit(values) { 
    console.log(values) 
    this.props.addUser(values) 
    } 

    render() { 
    return (
     <div> 
     <h1>Bjud in användare</h1> 
     <AddUserForm onSubmit={this.submit.bind(this)} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { user: state.user } 
} 

export default connect(mapStateToProps, { addUser })(AddUserContainer) 

Ich bin wirklich dankbar für alle Antworten! Bleib großartig!

Answer 1

Nicht 100% dies ist Ihr Problem, aber ich würde empfehlen, gegen das Formular zu binden oder was auch immer. Angenommen, Sie speichern die Eingabe im Benutzerobjekt des Status, dann möchten Sie nur eine Übermittlungsmethode definieren und sie mit this.state.user aufrufen. Diese Methode sollte im Grunde nur Ihre API-Methode aufrufen.

import React, { Component } from 'react' 
import { addUser } from '../../actions/addUserAction' 
import AddUserForm from './Views/AddUserForm' 
import { connect } from 'react-redux' 

class AddUserContainer extends Component { 
    submit(values) { 
    console.log(values) 
    this.props.addUser(values) 
    } 

    render() { 
    return (
     <div> 
     <h1>Bjud in användare</h1> 
     <AddUserForm onSubmit={this.submit(this.state.user)} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { user: state.user } 
} 

export default connect(mapStateToProps, { addUser })(AddUserContainer) 

Answer 2

In Ihrem AddUserForm.js

Hier haben Sie onSubmitHandler als Stütze hinzuzufügen in der einreichen Funktion für die Aufnahme, die einreichen auf Formular auszuführen annehmen wird. Sie müssen dann die onSubmitHandler zu handleSubmit()

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

const AddUserForm = ({ handleSubmit, onSubmitHandler }) => { 
    return (
    <form onSubmit={handleSubmit(onSubmitHandler)}> 
     <div> 
     <Field name="email" component="input" type="email" /> 
     </div> 
     <button type="submit">Bjud in</button> 
    </form> 
) 
} 
export default reduxForm({ 
    form: 'addUser' 
})(AddUserForm) 

In Ihrem AddUserContainer.js ändern onSubmit={this.submit.bind(this)} zu onSubmitHandler={this.submit.bind(this)}