react实现表单组件

来源：互联网发布：android 打开淘宝链接编辑：程序博客网时间：2024/06/04 21:08

1、首先，引入js必不可少

2、废话少说，直接贴代码（注：这里把单选框和复选框定义成了两个子组件，子组件会调用父组件的方法）

<body>

<h3>react表单事件</h3>
<div id="form"></div>


<script type="text/babel">
var FormApp=React.createClass({
getInitialState:function(){
return {
inputVlaue:'默认用户名',
selectValue:'A',
radioValue:'22',
checkboxValue:[],
textareaValue:'默认备注内容'
}
},
handleRadio:function(e){
this.setState({
radioValue:e.target.value
})
},
handleCheckbox:function(e){
var checks=this.state.checkboxValue.slice();
var newVal=e.target.value;
var index=checks.indexOf(newVal);
if(index == -1){
checks.push(newVal);
}else{
checks.splice(index,1);
}
this.setState({
checkboxValue:checks
})
},
handleSubmit:function(e){
e.preventDefault();
var formData={
uname:this.refs['uname'].value,
age:this.refs['age'].value,
remark:this.refs['remark'].value,
radioValue:this.state.radioValue,
checkboxValue:this.state.checkboxValue
}
console.log(formData);
},
render:function(){
return (
<form onSubmit={this.handleSubmit}>
<input type="text" defaultValue={this.state.inputVlaue} ref="uname"/>
<br/>
<select defaultValue={this.state.selectValue} ref="age">
<option value="A">10-20</option>
<option value="B">20-30</option>
<option value="C">30-40</option>
<option value="D">40-50</option>
</select>
<br/>
<RadioButtons handleRadio={this.handleRadio}/>
<br/>
<CheckButtons handleCheckbox={this.handleCheckbox}/>
<br/>
<textarea defaultValue={this.state.textareaValue} ref="remark"></textarea>
<button type="submit">提交</button>
</form>
)
}
})
//单选按钮
var RadioButtons=React.createClass({
render:function(){
return (
<div>
<span>请选择年龄</span>
<input onChange={this.props.handleRadio} name="age" type="radio" value="15"/>15
<input onChange={this.props.handleRadio} name="age" type="radio" value="22" defaultChecked/>22
<input onChange={this.props.handleRadio} name="age" type="radio" value="33"/>33
</div>
)
}
})
//多选按钮
var CheckButtons=React.createClass({
render:function(){
return (
<div>
<input onChange={this.props.handleCheckbox} name="like" type="checkbox" value="足球"/>
<input onChange={this.props.handleCheckbox} name="like" type="checkbox" value="篮球"/>
<input onChange={this.props.handleCheckbox} name="like" type="checkbox" value="游泳"/>
</div>
)
}
})

var FormCont=ReactDOM.render(
<FormApp />,
document.getElementById("form")
)

</script>

</body>

0 1