React學習筆記(四) form表單

約束性和非約束性組件

非約束性組件

非約束性組件：例如:<input type="text" defaultValue="a" />
這個defaultValue其實就是原生DOM中的value屬性。
這樣寫出來的組件，其中的value就是用戶輸入的內容，React徹底無論輸入過程。
若是不添加defaultValue，就須要添加onChange 而後用value="a"，否則會報錯。

約束性組件

例如：<input value={this.state.name} type="text" onChange={this.inputChange} />
這裏的value屬性就再也不是一個寫死了的值，他是this.state.name，this.state.name是由this.inputChange負責管理。
此時的input的value值就不是用戶輸入的內容，而是onChange事件觸發以後，由this.setState從新渲染了一次。
不過React會優化這個渲染過程。看上去有點相似雙休數據綁定。

form表單

e.preventDefault() 能夠阻止form表單提交。
onSubmit={this.hadelSubmit} 代替form提交表單；
radio：單選按鈕須要添加判斷才能進行單選，例如：

性 別:  <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}/>女
複製代碼

select標籤:在原生中獲取列表的值是在option標籤中經過value屬性獲取，而在React中能夠將option都看做一個總體

<select value={this.state.city} onChange={this.hadelCity}>
                                {
                                    this.state.citys.map(function (value, key) {
                                        return <option key={key}>{value}</option>
                                    })
                                }
                            </select>
複製代碼

checkbox標籤，由於有多個值，因此跟上面的幾個標籤還有點不太同樣，

{
                        this.state.hobby.map( (value, index) => {
                            return (
                                <span key={index} >
                                    <input  type="checkbox" checked={value.checked} onChange={this.hadelHobby.bind(this,index)}/>{value.title}
                                </span>
                            )
                        })
                    }
複製代碼

由於是存在多個結果的，因此onChange須要獲取整個list而後獲取key（index）值，而後再經過key進行操做：

hadelHobby=(index)=>{
        var hobby = this.state.hobby;
        hobby[index].checked =! hobby[index].checked;
        this.setState({
            hobby:hobby
        })
    }
複製代碼