react form 绑定值

react form 表单

一般的表单应用其实不需要实时监控表单项的用户输入，用 defaultValue 

 如果需要数据的双向绑定那么需要value,onChange方法的联合使用

import React from 'react';
import './../assets/css/form.css'
export default class ReactForm extends React.Component{
    /**
     * 
     * @param {*} props 
     * defualtValue
     * value change 
     * 表单绑定值
     */
    constructor(props) {
        super(props);

        this.state = {
            msg: 'form 表单',
            username: "",
            sex: 0, // 0 未知 1 表示男生  2表示女生
            age: '', //
            hobby: [{
                key: "0",
                value: "读书",
                checked: true
            },{
                key: "1",
                value: "游泳",
                checked: false
            },{
                key: "2",
                value: "打羽毛球",
                checked: true
            }],
            city: ['','成都','长沙','广州','深圳','北京']

        }
    }


    hanlderChangeName(e) {
        this.setState({
            username: e.target.value
        })
    }

    handlerChangeSex(e) {
        debugger;
        this.setState({
            sex: e.target.value
        })
    }

    hanlderChangeAge(e) {
        this.setState({
            age: e.target.value
        })
    }

    hanlderChangeHobby(e) {
        
        let hobby = this.state.hobby;
        let value = e.target.value;
        let checked = e.target.checked;
        
        hobby.map((item,index)=>{
            item.checked = item.value == value ? checked: item.checked;
        })

        this.setState(hobby);


   
    }
    render() {
        let o_option = [];
        let o_hobby = [];
        let pesstion = {};
        this.state.city.map(function(value,index){
            pesstion = {};
            pesstion = index == 0 ? <option key={index} value={index} checked>{value}</option> : <option key={index} value={index}>{value}</option>
            o_option.push(pesstion);
        });

        this.state.hobby.map((item,index)=>{
            pesstion = {}; 
            pesstion = <span key={index}><input type="checkbox" checked={item.checked} onChange={(e)=>this.hanlderChangeHobby(e)} value={item.value} name="hobby"/>{item.value}</span>
            o_hobby.push(pesstion);
        })

        return (
            <div>
                <form>
                    <div className="formItem">
                        {this.state.msg}
                    </div>
                    <div className= "formItem">
                        <label htmlFor="username">
                            姓名:
                        </label>
                        <input name="username" type="text" onChange={(e)=>this.hanlderChangeName(e)} value={this.state.username}/>
                    </div>

                    <div className= "formItem">
                        <label htmlFor="sex">
                           性別:
                        </label>
                        <input type="radio" onChange={(e)=>this.handlerChangeSex(e)} name="sex" value="1"/>男
                        <input type="radio" onChange={(e)=>this.handlerChangeSex(e)} name="sex" value="2"/>女
                    </div>

                    <div className= "formItem">
                        <label htmlFor="age">
                            年齡:
                        </label>
                        <input name="age" type="text" onChange={(e)=>this.hanlderChangeAge(e)} value={this.state.age}/>
                    </div>

                    <div className= "formItem">
                        <label htmlFor="city">
                            城市:
                        </label>
                        <select name="city">
                            {o_option}
                        </select>
                    </div>

                    <div className= "formItem">
                        <label htmlFor="hobby">
                            爱好:
                        </label>
                            {o_hobby}
                    </div>
                    <div className= "formItem">

                    </div>

                    <div className= "formItem formItem-center">
                        <button className="button button-primary" type="button">提取表单值</button>
                    </div>


                </form>
            </div>
        )

    }


}