React中的表单

React中的表单和html中的表单没有什么大区别，无非是定义表单组件时，获取表单中的输入框，复选框，下拉框等一些控件的值，下面用一个Demo记录React中使用表单的方法，浏览器中运行的效果如下图：

点击“提交”按钮后，控制台中会打印出表单中的数据，下面上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mixin用法</title>
	<!-- 引入React需要用到的js文件 -->
	<script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
	<script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>
	<style type="text/css">
	.redStar {
		color: red;
	}
	.loginHint {
		font-size: 12px;
	}
	.tableRow {
		height: 30px;
	}
	</style>
</head>
<body>
	<div id="container"></div>
	<script type="text/jsx">
		var Form = React.createClass({
			getInitialState: function() {
				//state对象中存放表单中的几个数据
				return {
					username: "",password: "",gender: "male",agree: false
				};
			},//提交表单时，打印出state对象，即表单中的数据
			handleSubmit: function(event) {
				//阻止表单的默认提交行为，防止页面自动跳转
				event.preventDefault();
				console.log(this.state);
			},//公用的函数，用于表单数据发生改变时调用
			handleChange: function(type,event) {
				switch(type) {
					case "username": 
						this.setState({username: event.target.value});
						break;
					case "password":
						this.setState({password: event.target.value});
						break;
					case "gender": 
						this.setState({gender: event.target.value});
						break;
					case "agree":
						//这里要用event.target.checked获取复选框是否被选中
						this.setState({agree: event.target.checked});
						break;
				}
			},render: function() {
				return (
					<form className="form">
						<label htmlFor="username">username:</label>
						<input type="text" id="username" onChange={this.handleChange.bind(this,"username")} value={this.state.username} />
						<br/><br/>
						<label htmlFor="password">password:</label>
						<input type="password" id="password" onChange={this.handleChange.bind(this,"password")} value={this.state.password} />
						<br/><br/>
						<label htmlFor="gender">gender:</label>
						<select id="gender" style={{width: '150px'}} onChange={this.handleChange.bind(this,"gender")} value={this.state.gender} >
							<option value="male">男</option>
							<option value="female">女</option>
						</select>
						<br/><br/>
						<label htmlFor="agree">同意用户协议</label>
						<input type="checkbox" id="agree" value="agree" onChange={this.handleChange.bind(this,"agree")} value={this.state.agree} />
						<br/><br/>
						<button onClick={this.handleSubmit}>提交</button>
					</form>
				);
			}
		});
		React.render(
			<Form />,document.getElementById('container')
		);
	</script>
</body>
</html>

需要注意的地方是：

在handleChange()函数中，处理了4个不同的控件，通过传入的type值不同来区分是哪个控件的值发生了改变，然后在jsx代码中，通过onChange={this.handleChange.bind()}函数来调用handleChange()函数，这里的bind函数调用后会创建一个新的函数，下面是网上找到的一段话：

bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.bind主要是为了改变函数内部的this指向.

React中的表单

相关文章