React 获取并设置表单元素

React获取表单元素，设置表单元素（select,input,checkbox,textarea）：

• 限制性约束 （value（通过react实现mv 方式绑定的值））
• 非限制性约束（defaultvalue 相当于原生的value）

import React from 'react';
class UserForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            name:"",
            sex:[
                {
                    title:"男",
                    isck:true
                },
                {
                    title:"女",
                    isck:false
                }
            ],
            hobby:[
                {
                    title:"篮球",
                    isck:false
                },
                {
                    title:"羽毛球",
                    isck:false
                },
                {
                    title:"乒乓球",
                    isck:false
                },
                {
                    title:"足球",
                    isck:false
                }
            ],
            selectInfo:[
                {
                    title:"是"
                },
                {
                    title:"否"
                }
            ],
            selectData:"",
            textData:""
        };
    }
    //姓名的监听事件
    changeName=(e)=>{
        let value=e.target.value;
        this.setState({
            name:value
        });
    }
    //性别的监听事件  拿到索引，通过索引修改isck值
    changeSex=(index)=>{
        //修改原数据
        let sex=this.state.sex;
        sex.map((v,k)=>{
            if(k===index){
                v.isck=true;
            }
            else{
                v.isck=false;
            }
        });
        this.setState({
            sex:sex
        });
    }
    //兴趣的监听事件
    changeHobby=(index)=>{
        let hobby=this.state.hobby;
        hobby[index].isck=!hobby[index].isck;
        this.setState({
            hobby:hobby
        });
    }
    //选择框的监听事件
    changeSelect=(e)=>{
        let val=e.target.value;
        this.setState({
            selectData:val
        });
    }
    //文本域的监听事件
    changeText=(e)=>{
        let val=e.target.value;
        this.setState({
            textData:val
        });
    }
    Regest=(e)=>{
        //输出用户的值
        console.log(this.state.name,this.state.sex,this.state.hobby,this.state.selectData,this.state.textData);
        //阻止表单提交
        e.preventDefault();
    }
    render() {
        return (
            <div>
                <form method="post">
                    <ul>
                        <li>
                            姓名：<br/>
                            <input type="text" onChange={this.changeName} value={this.state.name}/>
                        </li>
                        <li>
                            性别：<br/>
                            {
                                this.state.sex.map((value,index)=>{
                                    return(
                                        <span key={index}>
                                            <input type="radio" onChange={this.changeSex.bind(this,index)} name="sex" checked={value.isck}/>{value.title}
                                        </span>
                                    )
                                })
                            }
                        </li>
                        <li>
                            兴趣：<br/>
                            {
                                this.state.hobby.map((v,k)=>{
                                    return(
                                        <span key={k}>
                                            <input type="checkbox" onChange={this.changeHobby.bind(this,k)} checked={v.isck}/>{v.title}
                                        </span>
                                    )
                                })
                            }
                        </li>
                        <li>
                            是否在职：<br/>
                            <select onChange={this.changeSelect}>
                                <option>-请选择-</option>
                                {
                                    this.state.selectInfo.map((v,k)=>{
                                        return(
                                            <option key={k} value={v.title}>{v.title}</option>
                                        )
                                    })
                                }
                            </select>
                        </li>
                        <li>
                            备注：<br/>
                            <textarea onChange={this.changeText} value={this.state.textData}></textarea>
                        </li>
                        <li><button onClick={this.Regest}>注册</button></li>
                    </ul>
                </form>
            </div>
        );
    }
}
export default UserForm;