react表單事件和取值

常見的表單包括輸入框，單選框，復選框，下拉框和多文本框，本次主要總結它們在react中如何取值。

輸入框

在之前有說過輸入框，可以先給input框的value綁定一個值，然后通過input框的改變事件來獲取用戶輸入的值，並將這個值賦值給value綁定的值，就可以實現數據的雙向綁定了。

單選框

單選框，首先需要控制的單選框的是否選中，這里可以通過控制checked屬性的值來控制當前單選框是否選中，改變checked的值就可以改變選中狀態。其次，單選框也有onChange事件，可以通過onChange事件獲取value的值。所以可以通過value值間接控制是否選中，但是onChange只能獲取value值，不能改變，需要在中間添加一個過渡的變量。具體操作如下：

select下拉框

 關於select，需要注意的有三點，首先是循環渲染option；其次是在之前的select中，value都是寫在option上的，但是在在react中，對select進行了簡單的封裝，需要將value放在select中；最后就是通過select的onChange事件獲取當前的選擇情況。

 

復選框

和上面的單個值操作不同的是，復選框是對數組進行操作，既然是數組，就需要在onChange中獲取當前操作項的索引，如果像下面這樣寫，就會因為this的指向不明而報錯了。

這是因為，在正常情況下，我們希望this能指向當前react組件，這樣就能在react組件中找到handelHobby事件了，但是因為使用了map進行循環，在map循環中，將this指向了window，因此找不到handelHobby了，解決辦法就是使用箭頭函數改變this指向了。

另外就是setState只能對數據整體進行操作，而不能直接對數組和對象的項進行操作，所以這里需要使用一個中間變量進行過度。

多文本框

多文本框就和input框是一樣的了，只是能換行輸入更多的內容而已。

下面貼出完整代碼，需要說明的是，單頁面中使用form的時候，要阻止form自帶的提交刷新事件。

import React from 'react';
class Test extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:'',
            sex:'1',
            city:'',
            citys:[
                '北京','上海','深圳'
            ],
            hobby:[
                {'do':'吃飯','checked':true},
                {'do':'睡覺','checked':false},
                {'do':'打豆豆','checked':false},
            ],
            info:''
        }
        this.handleInfo=this.handleInfo.bind(this);
    }
    handelSubmit=(e)=>{
        e.preventDefault();
        console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby,this.state.info);
    }
    handelName=(e)=>{
        this.setState({
            name:e.target.value
        })
    }
    handelSex=(e)=>{
        this.setState({
            sex:e.target.value
        })
    }
    handelCity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }
    handelHobby=(key)=>{
        var hobby=this.state.hobby;
        hobby[key].checked=!hobby[key].checked;
        this.setState({
            hobby:hobby
        })
    }
    handleInfo(e){
        this.setState({
            info:e.target.value
        })
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handelSubmit}>
                    用戶名：<input type="text" value={this.state.name} onChange={this.handelName} />
                    <br />
                    <br />
                    性別：<input type="radio" value="1" checked={this.state.sex==1} onChange={this.handelSex}/>男
                         <input type="radio" value="2" checked={this.state.sex==2} onChange={this.handelSex} />女
                    <br />
                    <br />
                    籍貫：
                        <select value={this.state.city} onChange={this.handelCity}>
                            {
                                this.state.citys.map(function(value,key){
                                    return <option key={key}>{value}</option>
                                })
                            }
                        </select>
                    <br />
                    <br />
                    愛好：
                        {
                            this.state.hobby.map((value,key)=>{ 
                                return (
                                        <span key={key}>
                                            {value.do}
                                            <input type="checkbox"  checked={value.checked}  onChange={this.handelHobby.bind(this,key)}/>
                                        </span>                    
                                )
                            })
                        }
                    <br />
                    <br/>
                    備注：<textarea vlaue={this.state.info}  onChange={this.handleInfo} />
                    <br/>
                    <br/>
                    <input type="submit"  defaultValue="提交"/>
                </form>
            </div>
        )
    }
}
export default Test;