react form 表单
一般的表单应用其实不需要实时监控表单项的用户输入,用 defaultValue
如果需要数据的双向绑定那么需要value,onChange方法的联合使用
import React from 'react';
import './../assets/css/form.css'
export default class ReactForm extends React.Component{
/**
*
* @param {*} props
* defualtValue
* value change
* 表单绑定值
*/
constructor(props) {
super(props);
this.state = {
msg: 'form 表单',
username: "",
sex: 0, // 0 未知 1 表示男生 2表示女生
age: '', //
hobby: [{
key: "0",
value: "读书",
checked: true
},{
key: "1",
value: "游泳",
checked: false
},{
key: "2",
value: "打羽毛球",
checked: true
}],
city: ['','成都','长沙','广州','深圳','北京']
}
}
hanlderChangeName(e) {
this.setState({
username: e.target.value
})
}
handlerChangeSex(e) {
debugger;
this.setState({
sex: e.target.value
})
}
hanlderChangeAge(e) {
this.setState({
age: e.target.value
})
}
hanlderChangeHobby(e) {
let hobby = this.state.hobby;
let value = e.target.value;
let checked = e.target.checked;
hobby.map((item,index)=>{
item.checked = item.value == value ? checked: item.checked;
})
this.setState(hobby);
}
render() {
let o_option = [];
let o_hobby = [];
let pesstion = {};
this.state.city.map(function(value,index){
pesstion = {};
pesstion = index == 0 ? <option key={index} value={index} checked>{value}</option> : <option key={index} value={index}>{value}</option>
o_option.push(pesstion);
});
this.state.hobby.map((item,index)=>{
pesstion = {};
pesstion = <span key={index}><input type="checkbox" checked={item.checked} onChange={(e)=>this.hanlderChangeHobby(e)} value={item.value} name="hobby"/>{item.value}</span>
o_hobby.push(pesstion);
})
return (
<div>
<form>
<div className="formItem">
{this.state.msg}
</div>
<div className= "formItem">
<label htmlFor="username">
姓名:
</label>
<input name="username" type="text" onChange={(e)=>this.hanlderChangeName(e)} value={this.state.username}/>
</div>
<div className= "formItem">
<label htmlFor="sex">
性別:
</label>
<input type="radio" onChange={(e)=>this.handlerChangeSex(e)} name="sex" value="1"/>男
<input type="radio" onChange={(e)=>this.handlerChangeSex(e)} name="sex" value="2"/>女
</div>
<div className= "formItem">
<label htmlFor="age">
年齡:
</label>
<input name="age" type="text" onChange={(e)=>this.hanlderChangeAge(e)} value={this.state.age}/>
</div>
<div className= "formItem">
<label htmlFor="city">
城市:
</label>
<select name="city">
{o_option}
</select>
</div>
<div className= "formItem">
<label htmlFor="hobby">
爱好:
</label>
{o_hobby}
</div>
<div className= "formItem">
</div>
<div className= "formItem formItem-center">
<button className="button button-primary" type="button">提取表单值</button>
</div>
</form>
</div>
)
}
}