在这章里,开始学习React中如何操作表单。
一、一个简单的实例
本例中设置输入框 input 值value = {this.state.data},当在输入框值发生变化时,可以使用 onChange 事件来监听 input 的变化,并修改 state,状态值的改变即刻渲染到页面上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React中的表单操作</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script type="text/javascript"src="js/browser.min.js" ></script>
<script type="text/javascript"src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var HelloForm = React.createClass({
getInitialState: function() {
return {username: 'afeng',userpwd:'afeng2'}
},
handleChange: function(e) {
this.setState({username: e.target.value});
},
handlePwdChange: function(e) {
this.setState({userpwd: e.target.value});
},
render: function() {
var username = this.state.username;
var userpwd = this.state.userpwd;
return <div>
<input type="text" value={username} onChange={this.handleChange} />
<br/>
<input type="password" value={userpwd} onChange={this.handlePwdChange} />
<h4>{username}</h4>
<h4>{userpwd}</h4>
</div>;
}
});
ReactDOM.render(
<HelloForm />,
document.getElementById('hello')
);
</script>
</body>
</html>
二、综合案例
从上面的例子可知,一个input要对应handleChange方法,显然不合适的,下面的例子合成一个函数处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script type="text/javascript"src="js/browser.min.js" ></script>
<body>
<div id="reactDemo"></div>
<script type="text/babel">
var ReactForm = React.createClass({
getInitialState:function(){
return {
username:'ReactDemo',
gender:'man',
checked:true
};
},
handleChange:function(event){
var newState={};
newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value;
this.setState(newState);
},
submitHandler:function (e) {
console.log(this.state);
},
render:function () {
return <form onSubmit={this.submitHandler} action="" method="get">
<label htmlFor="username">请输入用户名</label>
<input type="text" name="username" onChange={this.handleChange} value={this.state.username} id="username"/>
<br/>
<select name="gender" onChange={this.handleChange} value={this.state.gender}>
<option value="man">男</option>
<option value="woman">女</option>
</select>
<br/>
<label htmlFor="checkbox">全选</label>
<input type="checkbox" value="全选" checked={this.state.checked} onChange={this.handleChange} name="checked" id="checkbox"/>
<button type="submit">提交</button>
</form>
}
});
ReactDOM.render(<ReactForm/>,document.getElementById('reactDemo'));
</script>
</body>
</html>
需要注意的是,在submitHandler中,如果加入如下代码,则不会提交数据。
e.preventDefault();