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
        })
    }
复制代码