1、常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值。
2、输入框
在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件来获取用户输入的值,并将这个值赋值给value绑定的值,就可以实现数据的双向绑定了。
3、单选框
单选框,首先需要控制的单选框的是否选中,这里可以通过控制checked属性的值来控制当前单选框是否选中,改变checked的值就可以改变选中状态。其次,单选框也有onChange事件,可以通过onChange事件获取value的值。所以可以通过value值间接控制是否选中,但是onChange只能获取value值,不能改变,需要在中间添加一个过渡的变量。
4、select下拉框
关于select,需要注意的有三点,首先是循环渲染option;其次是在之前的select中,value都是写在option上的,但是在在react中,对select进行了简单的封装,需要将value放在select中;最后就是通过select的onChange事件获取当前的选择情况。
5、下面直接贴出完整代码
state:
import React, { Component } from "react";
class ReactForm extends Component {
constructor(props) {
super(props);
this.state = {
msg: "react表单",
name: "",
sex: "1",
city: "",
citys: ["北京", "上海", "深圳"],
hobby: [
{
title: "睡觉",
checked: true
},
{
title: "吃饭",
checked: false
},
{
title: "敲代码",
checked: true
}
],
info: ""
};
this.handleInfo = this.handleInfo.bind(this);
}
methods
handelSubmit = (e) => {
//阻止submit的提交事件
e.preventDefault();
console.log(
this.state.name,
this.state.sex,
this.state.city,
this.state.hobby,
this.state.info
);
};
handelName = e => {
this.setState({
name: e.target.value
});
};
handelSex = e => {
this.setState({
sex: e.target.value
});
};
handelCity = e => {
this.setState({
city: e.target.value
});
};
handelHobby = key => {
var hobby = this.state.hobby;
hobby[key].checked = !hobby[key].checked;
this.setState({
hobby: hobby
});
};
handleInfo(e) {
this.setState({
info: e.target.value
});
}
JSX
render() {
return (
<div>
<h2>{this.state.msg}</h2>
<form onSubmit={this.handelSubmit}>
用户名:{" "}
<input
type="text"
value={this.state.name}
onChange={this.handelName}
/>{" "}
<br />
<br />
性别:{" "}
<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 />
<br />
居住城市:
<select value={this.state.city} onChange={this.handelCity}>
{this.state.citys.map(function(value, key) {
return <option key={key}>{value}</option>;
})}
</select>
<br />
<br />
爱好:
{// 注意this指向
this.state.hobby.map((value, key) => {
return (
<span key={key}>
<input
type="checkbox"
checked={value.checked}
onChange={this.handelHobby.bind(this, key)}
/>{" "}
{value.title}
</span>
);
})}
<br />
<br />
备注:
<textarea vlaue={this.state.info} onChange={this.handleInfo} />
<input type="submit" defaultValue="提交" />
<br />
<br /> <br />
<br />
</form>
</div>
);
}
}
export default ReactForm;