javascript - You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop | Redux Forms -
i want create simple form takes in email adress , later adds our database. went react forms, because facilitates whole development process , reduces amount of time.
however, when i'm trying post form i'm getting error: uncaught error: must either pass handlesubmit() onsubmit function or pass onsubmit prop
here's adduserform.js:
import react 'react' import { field, reduxform } '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)
here's adduseraction:
import axios 'axios' import settings '../settings' axios.defaults.baseurl = settings.hostname export const adduser = email => { return dispatch => { return axios.post('/invite', { email: email }).then(response => { console.log(response) }) } }
and here's addusercontainer.js:
import react, { component } 'react' import { adduser } '../../actions/adduseraction' import adduserform './views/adduserform' import { connect } '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)
i grateful answers! stay awesome!
not 100% problem recommend against trying bind on form or whatever. assuming you're storing input in state's user object, want define submit method, , call this.state.user
. method should call api method.
import react, { component } 'react' import { adduser } '../../actions/adduseraction' import adduserform './views/adduserform' import { connect } '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)
Comments
Post a Comment