How to get form values in ReactJS

Question

I have a simple form page to gather some information from user. The sendReport method should get the values and rout to a new path. But the states like this.state.reason seem to be always null and they don't get the value. Can someone say where the problem is?

import React from 'react/lib/ReactWithAddons';
import { Link, browserHistory } from 'react-router'

export const Report = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState() {
        return {
            reason: 'n/a',
            message: "",
            name: "",
            affiliation: "",
            email: "",
            address: "",
            city: "",
            country: "",
            zipcode: "",
            phone: "",
        }
    },

    sendReport(event) {
        event.preventDefault();
        var data = {
            reason: this.state.reason,
            message: this.state.message,
            name: this.state.name,
            affiliation: this.state.affiliation,
            email: this.state.email,
            address: this.state.address,
            city: this.state.city,
            country: this.state.country,
            zipcode: this.state.zipcode,
            phone: this.state.phone,
        };
        browserHistory.push(`/rec/${id}/sent`);
    },

    render: function() {
        var countries = [{ id: 'Afghanistan', name: 'Afghanistan'}, { id: 'Albania', name: 'Albania'}, { id: 'Algeria', name: 'Algeria'}, { id: 'Andorra', name: 'Andorra'}, { id: 'Antigua and Barbuda', name: 'Antigua and Barbuda'}, { id: 'Argentina', name: 'Argentina'}, { id: 'Armenia', name: 'Armenia'}, { id: 'Australia', name: 'Australia'}, { id: 'Austria', name: 'Austria'}, { id: 'Azerbaijan', name: 'Azerbaijan'}, { id: 'Bahamas', name: 'Bahamas'}, { id: 'Bahrain', name: 'Bahrain'}, { id: 'Bangladesh', name: 'Bangladesh'}, { id: 'Barbados', name: 'Barbados'}, { id: 'Belarus', name: 'Belarus'}, { id: 'Belgium', name: 'Belgium'}, { id: 'Belize', name: 'Belize'}, { id: 'Benin', name: 'Benin'}, { id: 'Bhutan', name: 'Bhutan'}, { id: 'Bolivia', name: 'Bolivia'}, { id: 'Bosnia and Herzegovina', name: 'Bosnia and Herzegovina'}, { id: 'Botswana', name: 'Botswana'}, { id: 'Brazil', name: 'Brazil'}, { id: 'Brunei', name: 'Brunei'}, { id: 'Bulgaria', name: 'Bulgaria'}, { id: 'Burkina Faso', name: 'Burkina Faso'}, { id: 'Burundi', name: 'Burundi'}, { id: 'Cambodia', name: 'Cambodia'}, { id: 'Cameroon', name: 'Cameroon'}, { id: 'Canada', name: 'Canada'}, { id: 'Cape Verde', name: 'Cape Verde'}, { id: 'Central African Republic', name: 'Central African Republic'}, { id: 'Chad', name: 'Chad'}, { id: 'Chile', name: 'Chile'}, { id: 'China', name: 'China'}, { id: 'Colombia', name: 'Colombia'}, { id: 'Comoros', name: 'Comoros'}, { id: 'Congo', name: 'Congo'}, { id: 'Costa Rica', name: 'Costa Rica'}, { id: 'Côte d Ivoire', name: 'Côte d Ivoire'}, { id: 'Croatia', name: 'Croatia'}, { id: 'Cuba', name: 'Cuba'}, { id: 'Cyprus', name: 'Cyprus'}, { id: 'Czech Republic', name: 'Czech Republic'}, { id: 'Denmark', name: 'Denmark'}, { id: 'Djibouti', name: 'Djibouti'}, { id: 'Dominica', name: 'Dominica'}, { id: 'Dominican Republic', name: 'Dominican Republic'}, { id: 'East Timor', name: 'East Timor'}, { id: 'Ecuador', name: 'Ecuador'}, { id: 'Egypt', name: 'Egypt'}, { id: 'El Salvador', name: 'El Salvador'}, { id: 'Equatorial Guinea', name: 'Equatorial Guinea'}, { id: 'Eritrea', name: 'Eritrea'}, { id: 'Estonia', name: 'Estonia'}, { id: 'Ethiopia', name: 'Ethiopia'}, { id: 'Fiji', name: 'Fiji'}, { id: 'Finland', name: 'Finland'}, { id: 'France', name: 'France'}, { id: 'Gabon', name: 'Gabon'}, { id: 'Gambia', name: 'Gambia'}, { id: 'Georgia', name: 'Georgia'}, { id: 'Germany', name: 'Germany'}, { id: 'Ghana', name: 'Ghana'}, { id: 'Greece', name: 'Greece'}, { id: 'Grenada', name: 'Grenada'}, { id: 'Guatemala', name: 'Guatemala'}, { id: 'Guinea', name: 'Guinea'}, { id: 'Guinea-Bissau', name: 'Guinea-Bissau'}, { id: 'Guyana', name: 'Guyana'}, { id: 'Haiti', name: 'Haiti'}, { id: 'Honduras', name: 'Honduras'}, { id: 'Hong Kong', name: 'Hong Kong'}, { id: 'Hungary', name: 'Hungary'}, { id: 'Iceland', name: 'Iceland'}, { id: 'India', name: 'India'}, { id: 'Indonesia', name: 'Indonesia'}, { id: 'Iran', name: 'Iran'}, { id: 'Iraq', name: 'Iraq'}, { id: 'Ireland', name: 'Ireland'}, { id: 'Israel', name: 'Israel'}, { id: 'Italy', name: 'Italy'}, { id: 'Jamaica', name: 'Jamaica'}, { id: 'Japan', name: 'Japan'}, { id: 'Jordan', name: 'Jordan'}, { id: 'Kazakhstan', name: 'Kazakhstan'}, { id: 'Kenya', name: 'Kenya'}, { id: 'Kiribati', name: 'Kiribati'}, { id: 'North Korea', name: 'North Korea'}, { id: 'South Korea', name: 'South Korea'}, { id: 'Kuwait', name: 'Kuwait'}, { id: 'Kyrgyzstan', name: 'Kyrgyzstan'}, { id: 'Laos', name: 'Laos'}, { id: 'Latvia', name: 'Latvia'}, { id: 'Lebanon', name: 'Lebanon'}, { id: 'Lesotho', name: 'Lesotho'}, { id: 'Liberia', name: 'Liberia'}, { id: 'Libya', name: 'Libya'}, { id: 'Liechtenstein', name: 'Liechtenstein'}, { id: 'Lithuania', name: 'Lithuania'}, { id: 'Luxembourg', name: 'Luxembourg'}, { id: 'Macedonia', name: 'Macedonia'}, { id: 'Madagascar', name: 'Madagascar'}, { id: 'Malawi', name: 'Malawi'}, { id: 'Malaysia', name: 'Malaysia'}, { id: 'Maldives', name: 'Maldives'}, { id: 'Mali', name: 'Mali'}, { id: 'Malta', name: 'Malta'}, { id: 'Marshall Islands', name: 'Marshall Islands'}, { id: 'Mauritania', name: 'Mauritania'}, { id: 'Mauritius', name: 'Mauritius'}, { id: 'Mexico', name: 'Mexico'}, { id: 'Micronesia', name: 'Micronesia'}, { id: 'Moldova', name: 'Moldova'}, { id: 'Monaco', name: 'Monaco'}, { id: 'Mongolia', name: 'Mongolia'}, { id: 'Montenegro', name: 'Montenegro'}, { id: 'Morocco', name: 'Morocco'}, { id: 'Mozambique', name: 'Mozambique'}, { id: 'Myanmar', name: 'Myanmar'}, { id: 'Namibia', name: 'Namibia'}, { id: 'Nauru', name: 'Nauru'}, { id: 'Nepal', name: 'Nepal'}, { id: 'Netherlands', name: 'Netherlands'}, { id: 'New Zealand', name: 'New Zealand'}, { id: 'Nicaragua', name: 'Nicaragua'}, { id: 'Niger', name: 'Niger'}, { id: 'Nigeria', name: 'Nigeria'}, { id: 'Norway', name: 'Norway'}, { id: 'Oman', name: 'Oman'}, { id: 'Pakistan', name: 'Pakistan'}, { id: 'Palau', name: 'Palau'}, { id: 'Panama', name: 'Panama'}, { id: 'Papua New Guinea', name: 'Papua New Guinea'}, { id: 'Paraguay', name: 'Paraguay'}, { id: 'Peru', name: 'Peru'}, { id: 'Philippines', name: 'Philippines'}, { id: 'Poland', name: 'Poland'}, { id: 'Portugal', name: 'Portugal'}, { id: 'Puerto Rico', name: 'Puerto Rico'}, { id: 'Qatar', name: 'Qatar'}, { id: 'Romania', name: 'Romania'}, { id: 'Russia', name: 'Russia'}, { id: 'Rwanda', name: 'Rwanda'}, { id: 'Saint Kitts and Nevis', name: 'Saint Kitts and Nevis'}, { id: 'Saint Lucia', name: 'Saint Lucia'}, { id: 'Saint Vincent and the Grenadines', name: 'Saint Vincent and the Grenadines'}, { id: 'Samoa', name: 'Samoa'}, { id: 'San Marino', name: 'San Marino'}, { id: 'Sao Tome and Principe', name: 'Sao Tome and Principe'}, { id: 'Saudi Arabia', name: 'Saudi Arabia'}, { id: 'Senegal', name: 'Senegal'}, { id: 'Serbia and Montenegro', name: 'Serbia and Montenegro'}, { id: 'Seychelles', name: 'Seychelles'}, { id: 'Sierra Leone', name: 'Sierra Leone'}, { id: 'Singapore', name: 'Singapore'}, { id: 'Slovakia', name: 'Slovakia'}, { id: 'Slovenia', name: 'Slovenia'}, { id: 'Solomon Islands', name: 'Solomon Islands'}, { id: 'Somalia', name: 'Somalia'}, { id: 'South Africa', name: 'South Africa'}, { id: 'Spain', name: 'Spain'}, { id: 'Sri Lanka', name: 'Sri Lanka'}, { id: 'Sudan', name: 'Sudan'}, { id: 'Suriname', name: 'Suriname'}, { id: 'Swaziland', name: 'Swaziland'}, { id: 'Sweden', name: 'Sweden'}, { id: 'Switzerland', name: 'Switzerland'}, { id: 'Syria', name: 'Syria'}, { id: 'Taiwan', name: 'Taiwan'}, { id: 'Tajikistan', name: 'Tajikistan'}, { id: 'Tanzania', name: 'Tanzania'}, { id: 'Thailand', name: 'Thailand'}, { id: 'Togo', name: 'Togo'}, { id: 'Tonga', name: 'Tonga'}, { id: 'Trinidad and Tobago', name: 'Trinidad and Tobago'}, { id: 'Tunisia', name: 'Tunisia'}, { id: 'Turkey', name: 'Turkey'}, { id: 'Turkmenistan', name: 'Turkmenistan'}, { id: 'Tuvalu', name: 'Tuvalu'}, { id: 'Uganda', name: 'Uganda'}, { id: 'Ukraine', name: 'Ukraine'}, { id: 'United Arab Emirates', name: 'United Arab Emirates'}, { id: 'United Kingdom', name: 'United Kingdom'}, { id: 'United States', name: 'United States'}, { id: 'Uruguay', name: 'Uruguay'}, { id: 'Uzbekistan', name: 'Uzbekistan'}, { id: 'Vanuatu', name: 'Vanuatu'}, { id: 'Vatican City', name: 'Vatican City'}, { id: 'Venezuela', name: 'Venezuela'}, { id: 'Vietnam', name: 'Vietnam'}, { id: 'Yemen', name: 'Yemen'}, { id: 'Zambia', name: 'Zambia'}, { id: 'Zimbabwe', name: 'Zimbabwe'},];
        return (
            <div>
                <form onSubmit={this.sendReport}>
                    <div className=" col-sm-1" >
                        <input ref='reason' name='reason'  type='radio' value='content'  required />
                    </div>
                    <div className=" col-sm-1" >
                        <input ref='reason' name='reason' type='radio' value='copyright' />
                    </div>
                    <div className=" col-sm-1" >
                        <input ref='reason' name='reason' type='radio' value='noresearch'  />
                    </div>
                    <div className=" col-sm-1" >
                        <input ref='reason' name='reason' type='radio' value='illegalcontent'  />
                    </div>
                    <div className=" col-sm-8" >
                        <textarea ref='message' name='message' type='textarea' rows="4" cols="50"  required/>
                    </div>
                    <div className=" col-sm-8" >
                        <input ref='name' name='name' className="form-control" type='text'  required />
                    </div>
                    <div className=" col-sm-8" >
                        <input ref='affiliation' name='affiliation' className="form-control" type='text' required />
                    </div>
                    <div className=" col-sm-8" >
                        <input ref='email' name='email' className="form-control" type='email' required />
                    </div>
                    <div className=" col-sm-8" >
                        <input ref='address' name='address' className="form-control" type='text'  required />
                    </div>
                    <div className=" col-sm-8" >
                        <input ref='city' name='city' className="form-control" type='text'  required />
                    </div>
                    <div className=" col-sm-8" >
                        <DropdownList data={countries} valueField='id' textField='name'ref='country' name='country'  required  defaultValue={countries[0]}/>
                    </div>
                    <div className=" col-sm-8" >
                        <input name="phone" type='text'  pattern="[0-9]*" className="form-control" title= "Numbers Only" required />
                    </div>
                    <div >
                        <button type="submit" onClick={this.sendReport}> Send</button>
                    </div>
                </form>
            </div>
        );
    }
});

Scarysize · Accepted Answer · 2016-09-03 12:43:41Z

1

You update your state by using the this.setState method. For inputs you can gather all the input values with via callbacks:

<input onChange={event => this.setState({text: event.target.value})} />

Another option is to use refs and only read the input values when the form will be submitted:

<input ref={inputeElement => {this.inputElement = inputElement}}
...
// in sendReport
const text = this.inputElement.value;

Check these out:

React Forms: https://facebook.github.io/react/docs/forms.html
React Refs: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

answered Sep 3, 2016 at 12:43

Scarysize

4,31129 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get form values in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related