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
        })
    }