react 表单

根据react的示例，要取得受限组建的值，可以采用下面的方法：

import React ,{PropTypes}from 'react';
import { render } from 'react-dom';
const styles={
    mb10:{
        marginBottom:'15px'
    },
    w200:{
        '200px',
    }
}

class test extends React.Component{
    constructor(props){
        super();//和react没什么关系，javascript的特性，用于访问父对象上的函数。
        this.state={
            uName:'',
            choose:'1',//==>设置默认值
            gender:'Male',//==>设置默认值
            city:{
                cd:false,
                bj:true,
                sh:true
            },
            desc:'',
        }
    };
    nameChange = (event)=> {
        this.setState({
            uName:event.target.value
        });
    };
    chooseChange = (event) =>{
        this.setState({
            choose:event.target.value
        });
        console.log(event.target.value)//==>立即打印值
    };
    handleGenderChange = (e) => {
          this.setState({
            gender: e.target.value
      });
    };
    cityChang = (event) => {
        const value = event.target.value;
        const city = Object.assign({}, this.state.city);

        city[value] = !city[value];

        this.setState({
            city: city
        });
    };
    descChange = (e) => {
        this.setState({
            desc:e.target.value
        })
    };
    formSubmit = () => {
        console.log(this.state)//打印全部
        console.log('uName是：'+this.state.uName)
        console.log("select值是："+this.state.choose)
        console.log("radio值是："+this.state.gender)
        console.log("选择的城市是："+ Object.keys(this.state.city).filter(item => this.state.city[item]).join(','))
        console.log("文本域内容是："+this.state.desc)
    };
    render(){
        const selectList=[
            {value:'1',lable:'选择1'},
            {value:'2',lable:'选择2'},
            {value:'3',lable:'选择3'},
            {value:'4',lable:'选择4'},
            {value:'5',lable:'选择5'},
            {value:'6',lable:'选择6'}
        ]
        return(
            <div>
                <div>
                    <div style={styles.mb10}>
                        姓名：
                        <input type="text" name="uName" value={this.state.uName} onChange={this.nameChange}/>
                        <span>{this.state.nameError}</span>
                    </div>
                    <div style={styles.mb10}>
                        下拉框：
                        <select style={styles.w200} name="choose" value={this.state.choose} onChange={this.chooseChange}>
                        {selectList.map((list,index)=>(
                            <option value={list.value} key={index}>{list.lable}</option>
                        ))}
                        </select>
                    </div>
                    <div style={styles.mb10}>
                        单选框：
                        <input type="radio" name="gender" value="Male" onChange={ this.handleGenderChange } checked={ this.state.gender === 'Male' } />
                        男
                        <input type="radio" name="gender" value="Female" onChange={ this.handleGenderChange } checked={ this.state.gender === 'Female' } />
                        女
                    </div>
                    <div style={styles.mb10}>
                        复选框：
                        <input name="city" type="checkbox" value="cd" onChange={this.cityChang} checked={this.state.city.cd}/>成都
                        <input name="city" type="checkbox" value="bj" onChange={this.cityChang} checked={this.state.city.bj}/>北京
                        <input name="city" type="checkbox" value="sh" onChange={this.cityChang} checked={this.state.city.sh}/>上海
                        
                    </div>
                    <div style={styles.mb10}>
                        文本域：
                        <textarea name="desc" value={this.state.desc} onChange={this.descChange}>
                        </textarea>
                    </div>
                    <input type="button" value="提交表单" onClick={this.formSubmit} />
                </div>
            </div>
        )
    }
}
export default test;

测试打印值如下：

上面这种方法，是可以实现需求，但是当表单字段很多的时候，就比较尴尬了。不过有方法可以简写代码。

把onChange事件修改成一个，如下：

handleChange = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
        console.log(e.target.value)//==>调试打印值
    };

dom部分也就要把onChange绑定的事件都改成这个，如下：（注意name和value的命名，与this.state中的保持一致）

<div style={styles.mb10}>
    姓名：
    <input type="text" name="uName" value={this.state.uName} onChange={this.handleChange}/>
    <span>{this.state.nameError}</span>
</div>
<div style={styles.mb10}>
    下拉框：
    <select style={styles.w200} name="choose" value={this.state.choose} onChange={this.handleChange}>
    {selectList.map((list,index)=>(
        <option value={list.value} key={index}>{list.lable}</option>
    ))}
    </select>
</div>
<div style={styles.mb10}>
    单选框：
    <input type="radio" name="gender" value="Male" onChange={ this.handleChange } checked={ this.state.gender === 'Male' } />
    男
    <input type="radio" name="gender" value="Female" onChange={ this.handleChange } checked={ this.state.gender === 'Female' } />
    女
</div>
<div style={styles.mb10}>
    文本域：
    <textarea name="desc" value={this.state.desc} onChange={this.handleChange}>
    </textarea>
</div>

这种方法已经相对减少代码量了，但是CheckBox不能使用这种方法，CheckBox要单独写一个onChange事件，示例如第一段代码中的this.cityChang事件。

也可以使用react-compontent的form  可以大大简化代码。

https://github.com/react-component/form

关于箭头函数

以上示例使用箭头函数。

若函数是下面这种写法：

handleChange(e) {
        this.setState({
            [e.target.name]:e.target.value
        })
        console.log(e.target.value)//==>调试打印值
    };

那么就要修改下constructor，加上bind，否则有this指向问题，会出现：'setState' of undefined错误

constructor(props){
        super();//和react没什么关系，javascript的特性，用于访问父对象上的函数。
        this.state={
            uName:'',
            choose:'1',//==>设置默认值
            gender:'Male',//==>设置默认值
            city:{
                cd:false,
                bj:true,
                sh:true
            },
            desc:'',
        };
        this.handleChange=this.handleChange.bind(this);
    };

更推荐这种写法，效率高于箭头函数。