包括了表单里input radio select checkbox textarea form 等一些操作,
import React,{Component} from 'react';
class Reactform extends Component {
constructor(props) {
super(props);
this.state = {
msg:'React表单',
name:'',
sex:'1',
cty:'',
info:'',
citys:[
'北京','上海','深圳'
],
hobby:[
{
title:'睡觉',
'checked':true
},
{
title:'打游戏',
'checked':false
},
{
title:'旅游',
'checked':true
}
]
};
}
handelSubmit=(e)=>{
// 一点提交就会刷新,阻止submit事件
e.preventDefault();
console.log(this.state.name,this.state.sex,this.state.cty,this.state.hobby,this.state.info );
}
handelName=(e)=>{
this.setState({
name:e.target.value
})
}
handelSex=(e)=>{
this.setState({
sex:e.target.value
})
}
oncity=(e)=>{
this.setState({
cty:e.target.value
})
}
handelChecked=(key)=>{
var hobby = this.state.hobby;
hobby[key].checked = !hobby[key].checked;
this.setState({
hobby:hobby
})
}
handelinfo=() =>{
this.setState({
info:this.refs.info.value
})
}
render() {
return (
<div>
<hr/>
<h2>{this.state.msg}</h2>
<form onSubmit ={this.handelSubmit}>
<label>用户名</label>
<input type="text" value={this.state.name} onChange={this.handelName}/>
<br/>
<br/>
<label htmlFor="性别">性别:</label>
<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} />女
<br/>
<label htmlFor="地址">地址:</label>
<select name="" value={this.state.cty} onChange={this.oncity}>
{
this.state.citys.map((item,key)=>{
return <option key={key}>{item}</option>
})
}
</select>
<br/>
<label htmlFor="爱好">爱好:</label>
{
this.state.hobby.map((item,key)=>{
return(
<span key={key}>
<input type="checkbox" checked={item.checked} onChange={this.handelChecked.bind(this,key)}/>
<label htmlFor="">{item.title}</label>
</span>
)
})
}
<textarea name="" ref='info' value={this.state.info} onChange={this.handelinfo} cols="30" rows="10"></textarea>
<br/>
<br/>
<input type="submit" value="提交"/>
</form>
</div>
);
}
}
export default Reactform;
如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!