6、React中的表单
来源:互联网 发布:网络专升本 编辑:程序博客网 时间:2024/04/30 23:29
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指向.
0 0
- 6、React中的表单
- React.js中的表单
- React中的表单组件
- React中的表单元素
- React表单
- React -- 表单
- react-表单
- React表单
- react表单
- React 互动表单
- React-表单详解
- React的表单组件
- React-表单详解
- React表单组建
- react操作表单
- React表单详解
- React生成表单input
- React(9)--表单
- Android 命名规范 (提高代码可以读性)
- 使用ffmpeg步骤
- chrome禁用缓存:调试html5方便
- ZOJ 3203 Light Bulb
- jsp中显示汉字,引入包,打印时间
- 6、React中的表单
- 线性表之静态链表
- 使用 httpurlconnection 在android上post操作
- 最基础的 iOS 推送流程 —— 仅供开发时真机调试走通推送流程使用
- Bitmapfun -- ImageFetcher类 翻译
- LeetCode 326:Power of Three
- java字符串按照逗号分开
- Mysql中DATETIME、DATE和TIMESTAMP类型的特征和区别
- 流数据平台阅读笔记