第十章 React操作表单
来源：互联网 发布：ps cs6 mac破解版 编辑：程序博客网 时间：2024/05/17 04:08
在这章里，开始学习React中如何操作表单。
一、一个简单的实例
本例中设置输入框 input值value = {this.state.data}，当在输入框值发生变化时，可以使用onChange 事件来监听 input的变化，并修改 state，状态值的改变即刻渲染到页面上。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>React中的表单操作</title>
<scriptsrc="js/react.min.js"></script>
<scriptsrc="js/react-dom.min.js"></script>
<scripttype="text/javascript"src="js/browser.min.js"></script>
<scripttype="text/javascript"src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<divid="hello"></div>
<scripttype="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>
<inputtype="text"value={username}onChange={this.handleChange} />
<br/>
<inputtype="password"value={userpwd}onChange={this.handlePwdChange} />
<h4>{username}</h4>
<h4>{userpwd}</h4>
</div>;
}
});
ReactDOM.render(
<HelloForm/>,
document.getElementById('hello')
);
</script>
</body>
</html>
二、综合案例
从上面的例子可知，一个input要对应handleChange方法，显然不合适的，下面的例子合成一个函数处理。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>表单详解</title>
</head>
<scriptsrc="js/react.min.js"></script>
<scriptsrc="js/react-dom.min.js"></script>
<scripttype="text/javascript"src="js/browser.min.js"></script>
<body>
<divid="reactDemo"></div>
<scripttype="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 <formonSubmit={this.submitHandler} action=""method="get">
<labelhtmlFor="username">请输入用户名</label>
<inputtype="text"name="username"onChange={this.handleChange}value={this.state.username}id="username"/>
<br/>
<selectname="gender"onChange={this.handleChange}value={this.state.gender}>
<optionvalue="man">男</option>
<optionvalue="woman">女</option>
</select>
<br/>
<labelhtmlFor="checkbox">全选</label>
<inputtype="checkbox"value="全选"checked={this.state.checked}onChange={this.handleChange}name="checked"id="checkbox"/>
<buttontype="submit">提交</button>
</form>
}
});
ReactDOM.render(<ReactForm/>,document.getElementById('reactDemo'));
</script>
</body>
</html>
需要注意的是，在submitHandler中，如果加入如下代码，则不会提交数据。
e.preventDefault();
- 第十章 React操作表单
- react操作表单
- jquery第十期:表单的操作
- React表单
- React -- 表单
- react-表单
- React表单
- react表单
- React native学习第十章:ListView
- React Native 第十天
- React Native 第十一天
- React Native 第十三天
- React 互动表单
- 6、React中的表单
- React-表单详解
- React的表单组件
- React-表单详解
- React表单组建
- css hack
- IntelliJ IDEA 配置Tomcat 运行Web项目
- this关键字
- springmvc @autowired
- 归并排序
- 第十章 React操作表单
- python元组函数、列表
- 修改用户选中文本的样式
- 2016.5.2
- win10安装教程
- scikit-learn的基本用法(一)——KNN算法的使用
- 关于Mysql线程的基本设置
- Django模糊查询
- 【上机笔试之十二】数位拆解-进制转换
