Forms 如何在ReactJS中获取表单值

我有一个简单的表单页面来收集用户的一些信息。

sendReport

方法应获取值并路由到新路径。但是像

this.state.reason

这样的状态似乎总是空的，并且它们没有得到值。有人能说出问题出在哪里吗

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>
        );
    }
});

从'React/lib/ReactWithAddons'导入React；
从“react router”导入{Link，browserHistory}
导出常量报告=React.createClass({
mixin:[React.addons.LinkedStateMixin]，
getInitialState（）{
返回{
原因：“不适用”，
消息：“”，
姓名：“，
隶属关系：“，
电邮：“，
地址：“，
城市：“，
国家：“，
zipcode:“”，
电话：“，
}
},
发送报告（事件）{
event.preventDefault（）；
风险值数据={
原因：这个，州，原因，
消息：this.state.message，
名称：this.state.name，
联系：这个州，联系，
电子邮件：this.state.email，
地址：this.state.address，
城市：这个州，这个城市，
国家：这个州，
zipcode:this.state.zipcode，
电话：这个州的电话，
};
push（`/rec/${id}/sent`）；
},
render:function（）{
var国家=[{id:'阿富汗'，名称：'阿富汗'}，{id:'阿尔巴尼亚'，名称：'阿尔巴尼亚'}，{id:'阿尔及利亚'，名称：'阿尔及利亚'}，{id:'安道尔'，名称：'安道尔'}，{id:'安提瓜和巴布达'，名称：'安提瓜和巴布达'}，{id:'阿根廷'，名称：'阿根廷'}，{id:'亚美尼亚'，名称：'亚美尼亚'}，{id:'澳大利亚'，名称：'澳大利亚'}，{id:'奥地利'，姓名：'奥地利'}，{id:'阿塞拜疆'，姓名：'阿塞拜疆'}，{id:'巴哈马'，姓名：'巴哈马'}，{id:'巴林'，姓名：'巴林'}，{id:'孟加拉国'，姓名：'孟加拉国'}，{id:'巴巴多斯'，姓名：'巴巴多斯'}，{id:'白俄罗斯'，{id:'比利时'，姓名：'比利时'}，{id:'伯利兹'，姓名：'伯利兹'}，{id:'贝宁'，姓名：'贝宁'}，{id:'不丹'，姓名：'不丹'}，{id:'玻利维亚'，姓名：'玻利维亚'}，{id:'波斯尼亚和黑塞哥维那'，姓名：'波斯尼亚和黑塞哥维那'}，{id:'博茨瓦纳'，姓名：'博茨瓦纳'}，{id:'巴西'，姓名：'巴西'}，{id:'文莱'，姓名：'文莱'}，{id:'保加利亚'，姓名：'保加利亚'}，{id:'布基纳法索'，姓名：'布基纳法索'}，{id:'布隆迪'，姓名：'布隆迪'}，{id:'柬埔寨'，姓名：'柬埔寨'}，{id:'喀麦隆'，姓名：'喀麦隆'}，{id:'加拿大'，姓名：'加拿大'}，{id:'佛得角'，姓名：'佛得角'}，{id:'中非共和国'，姓名：'中非共和国'}，{id:'乍得'，姓名：'乍得'}，{id:'智利'}，{id:'中国'，姓名：'中国'}，{id:'哥伦比亚'，姓名：'哥伦比亚'}，{id:'科摩罗'，姓名：'科摩罗'}，{id:'刚果'，姓名：'刚果'}，{id:'哥斯达黎加'，姓名：'哥斯达黎加'}，{id:'科特迪瓦'，姓名：'科特迪瓦'}，{id:'克罗地亚'，姓名：'克罗地亚'}，{id:'古巴'，姓名：'古巴'}，{id:'塞浦路斯'，{id:'捷克共和国'，姓名：'捷克共和国'}，{id:'丹麦'，姓名：'丹麦'}，{id:'吉布提'，姓名：'吉布提'}，{id:'多米尼加'，姓名：'多米尼加'}，{id:'多米尼加共和国'，姓名：'多米尼加共和国'}，{id:'东帝汶'，姓名：'东帝汶'}，{id:'厄瓜多尔'，姓名：'厄瓜多尔'}，{id:'埃及'，姓名：'埃及'}，{id:'萨尔瓦多'}，{id:'赤道几内亚'，名称：'赤道几内亚'}，{id:'厄立特里亚'，名称：'厄立特里亚'}，{id:'爱沙尼亚'，名称：'爱沙尼亚'}，{id:'埃塞俄比亚'，名称：'埃塞俄比亚'}，{id:'斐济'，名称：'斐济'}，{id:'芬兰'，名称：'芬兰'}，{id:'法国'，名称：'法国'}，{id:'加蓬'，名称：'加蓬'}，{id:'冈比亚'}，{id:'格鲁吉亚'，姓名：'格鲁吉亚'}，{id:'德国'，姓名：'德国'}，{id:'加纳'，姓名：'加纳'}，{id:'希腊'，姓名：'希腊'}，{id:'格林纳达'，姓名：'格林纳达'}，{id:'危地马拉'，姓名：'危地马拉'}，{id:'几内亚'，姓名：'几内亚'}，{id:'几内亚比绍'，姓名：'几内亚比绍'}，{id:'圭亚那'，姓名：'圭亚那'，{id:'海地'}，{id:'洪都拉斯'，姓名：'洪都拉斯'}，{id:'香港'，姓名：'香港'}，{id:'匈牙利'，姓名：'匈牙利'}，{id:'冰岛'，姓名：'冰岛'}，{id:'印度'，姓名：'印度'}，{id:'印度尼西亚'，{id:'伊朗'，姓名：'伊朗'}，{id:'伊拉克'}，{id:'爱尔兰'，{id:'以色列'，姓名：'以色列'}，{id:'意大利'，姓名：'意大利'}，{id:'牙买加'，姓名：'牙买加'}，{id:'日本'，姓名：'日本'}，{id:'约旦'，{id:'哈萨克斯坦'，姓名：'哈萨克斯坦'}，{id:'肯尼亚'，姓名：'基里巴斯'，{id:'朝鲜'，姓名：'朝鲜'}，{id:'韩国'，姓名：'韩国'}，{id:'科威特'，姓名：'科威特'}，{id:'吉尔吉斯斯坦'，姓名：'吉尔吉斯斯坦'}，{id:'老挝'，姓名：'老挝'}，{id:'拉脱维亚'，{id:'黎巴嫩'，姓名：'黎巴嫩'}，{id:'莱索托'，姓名：'莱索托'}，{id:'利比里亚'，姓名：'利比里亚'}，{id:'利比亚'，姓名：'利比亚'}，{id:'列支敦士登'，姓名：'列支敦士登'}，{id:'立陶宛'，姓名：'立陶宛'}，{id:'卢森堡'，姓名：'卢森堡'}，{id:'马其顿'，姓名：'马其顿'}，{id:'马达加斯加'，姓名：'马达加斯加'}，{id:'马拉维'，姓名：'马拉维'}，{id:'马来西亚'，姓名：'马来西亚'}，{id:'马尔代夫'，姓名：'马尔代夫'}，{id:'马里'，姓名：'马里'}，{id:'马耳他'，姓名：}，{id:'马绍尔群岛'，名称：'马绍尔群岛'}，{id:'毛里塔尼亚'，名称：'毛里塔尼亚'}，{id:'毛里求斯'，名称：'毛里求斯'}，{id:'墨西哥'，名称：'墨西哥'}，{id:'密克罗尼西亚'，名称：'密克罗尼西亚'}，{id:'摩尔多瓦'，名称：'摩纳哥'}，{id:'摩纳哥'，名称：'蒙古'}，{id:'黑山'，姓名：'黑山'}，{id:'摩洛哥'，姓名：'摩洛哥'}，{id:'莫桑比克'，姓名：'莫桑比克'}，{id:'缅甸'，姓名：'缅甸'}，{id:'纳米比亚'，姓名：'纳米比亚'}，{id:'瑙鲁'，姓名：'瑙鲁'}，{id:'尼泊尔'，姓名：'尼泊尔'，{id:'荷兰'}{
<input ref={inputeElement => {this.inputElement = inputElement}}
...
// in sendReport
const text = this.inputElement.value;