一、约束性组件和非约束性组件
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 />