react之旅（六）约束性和非约束性组件 input text radio select checkbox textarea 以及获取表单的内容

一、约束性组件和非约束性组件

1.1 非约束性组件

非约束性组件这样写：

<input type="input" defaultValue="123"/>

这里的defaultValue就是原生DOM的value，用户输入的值就是vaule的值，react完全不管输入的过程。

1.2 约束性组件

约束性组件这样写：

onChange =(e) => {
        let dom = e.target;
        this.setState({
            name: dom.value
        })
    }
<input value={this.state.name} onChange={this.onChange}/>

这个时候，value的值不是用户输入的值，而是this.state.name的值。流程是这样的：用户输入触发了onChange方法，onChange方法改变了this.state.name的值，react重新渲染value值。react接管了输入过程。

1.3 约束性和非约束性组件比较

• 非约束性组件：用户输入 v —> input框显示 v
• 约束性 组件：用户输入 v —> 触发onChange方法 —> 改变this.state.name的值 —> render方法重新渲染input的value值 —> input框显示 v

二、input text

input框可以借助ref属性或事件对象来获取输入框的值：

handName =(e) => {
        let dom = e.target;
        this.setState({
            name: dom.value
        })
        console.log(dom.value);
        console.log(this.refs.name.value);
    }
<input ref="name" value={this.state.name} onChange={this.handName}/>

三、radio

单选框借助onChange来获取值：

				handSex = (e) =>{
				        let dom = e.target;
				        this.setState({
				            sex: dom.value
				        })
				        console.log(dom.value);
				    }
				<label>性别：</label>
                <input type="radio" value="1" checked={this.state.sex == "1"} onChange={this.handSex}/> 男
                <input type="radio" value="2" checked={this.state.sex == "2"} onChange={this.handSex}/> 女<br /><br />

四、select

下拉框借助onChange来获取值：

			handCity = (e) => {
			        let dom = e.target;
			        this.setState({
			            cityV: dom.value
			        })
			        console.log(dom.value);
			    }
				<label>居住地：</label>
                <select value={this.state.cityV} onChange={this.handCity}>
                    {
                        this.state.city.map((v, k) => {
                            return (
                                <option key={k} value={v.id}>{v.title}</option>
                            )
                        })
                    }
                </select><br /><br />

五、checkbox

复选框借助onChange事件来获取值：

				handHobby = (e, index) =>{
				        let hobbyBuf = this.state.hobby;
				        hobbyBuf[index].checked = !hobbyBuf[index].checked;
				        this.setState({
				            hobby: hobbyBuf
				        });
				        console.log(hobbyBuf);
				    }
				<label>爱好：</label>
                <span>
                    {
                        this.state.hobby.map((v, k) => {
                            return (
                                <span key={k}>
                                    <input type="checkbox" checked={v.checked} onChange={(e) => {this.handHobby(e, k)}} /> {v.title}
                                </span>
                            )
                        })
                    }
                </span>

六、textarea

文本框可以借助ref属性或事件对象来获取输入框的值：

			    handInfo = (e) => {
			        let dom = e.target;
			        this.setState({
			            info: dom.value
			        })
			        console.log(dom.value);
			        console.log(this.refs.info.value);
			    }
                <label>备注：</label>
                <textarea ref="info" value={this.state.info} onChange={this.handInfo}/><br /><br />