Submitting redux form values

Question

I am new to react and redux technology. now started building an application that contains several redux forms. We want to submit simple form with values.

For ex: login form

Username : text input field
Password: text input field
Submit button

After entering values in fields and click on submit button i want to get the username and password field values in object or json data .. so that I can store it to my server with POST method.

Right now we are using handleSubmit(), but data is not coming as object

Answer 1

1 - The best practice to deal with input values are making them controlled. Which means :

Instead of

<input type='password' />

You do :

<input 
  type='password' 
  value={password} 
  onChange={ event => myInputHandler( event.target.value ) } 
/>

The value might come from your state, redux state or as a props etc. Your handler function differs according to where you store it.

I will give you an example with react state :

<input 
  type='password' 
  value={this.state.password} 
  onChange={ event => this.setState({ password : event.target.value }) } 
/>

So whenever someone types, your onChange handler will be called, so that your react state will update with the input ( event.target.value ).

2 - If you need these values when a user submits, then you need to wrap these input fields within a form element and attach a onSubmit handler.

onSubmitHandler( event ){
   event.preventDefault()
   let password = this.state.password
   // use password or other input fields, send to server etc.
}

<form onSubmit={ event => this.onSubmitHandler(event) }> 
    <input 
      type='password' 
      value={this.state.password} 
      onChange={ event => this.setState({ password : event.target.value })    } 
    />
</form> 

Hope you get what you need.

Answer 2

If you are using redux to store state then use redux-from then use redux from

import React from 'react'
import {Field, reduxForm} from 'redux-form'
const SimpleForm = props => { 
    const {handleSubmit, submitting} = props return (
<form onSubmit={handleSubmit(e=>console.log('your form detail here', e))}>
    <div>
        <label>First Name</label>
        <div>
            <Field name="firstName" component="input" type="text" placeholder="First Name" />
        </div>
    </div>
    <div>
        <label>Last Name</label>
        <div>
            <Field name="lastName" component="input" type="text" placeholder="Last Name" />
        </div>
    </div>
    <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>        
    </div>
</form>
) }

export default reduxForm({ form: 'simple'})(SimpleForm)

Go here for more detail https://redux-form.com

Answer 3

I put the name of the input as the key that I want to use. Then each time the input changes I destructure the event passed to the onChange function, and I use the name,value to update the state. On form submit make sure to use preventDefault(); in order to avoid the page refreshing.

import React, { Component } from 'react'

class FormExample extends Component {
    constructor(props){
        super(props)
        this.state = {
            formData: {}
        }
    }

    handleInputChange = ({ target: { name,value } }) => {
        this.setState({
            formData: {
                ...this.state.formData,
                [name]: value
            }
        })
    }

    handleFormSubmit = e => {
        e.preventDefault()
        // This is your object
        console.log(this.state.formData)
    }

    render() {
        return(
            <div>
                <Form 
                    handleSubmit={this.handleFormSubmit}
                    handleChange={this.handleInputChange}
                />
            </div>
        )
    }
}

const Form = ({ handleSubmit, handleChange }) => (
    <form onSubmit={handleSubmit}>
        <input onChange={handleChange} name="username" type="text" placeholder="Username" />
        <input onChange={handleChange} name="password" type="password" placeholder="Password" />
        <button>Submit</button>
    </form>
)

export default FormExample