React表单元素的使用
一、
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
getInitialState: function () {
return {
username: "",
gender: "man",
checked: true
};
},
handleUsernameChange: function (event) {
this.setState({
username: event.target.value
});
},
handleGenderChange: function (event) {
this.setState({
gender: event.target.value
});
},
handleCheckboxChange: function (event) {
this.setState({
checked: event.target.checked
});
},
submitHandler: function (event) {
event.preventDefault();
console.log(this.state);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<label htmlFor="username">请输入用户名:</label>
<input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} />
<br />
<select value={this.state.gender} onChange={this.handleGenderChange}>
<option value="man">男</option>
<option value="woman">女</option>
</select>
<br />
<label htmlFor="checkbox">同意用户协议</label>
<input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} />
<button type="submit">注册</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
React表单元素的使用的更多相关文章
- React 表单元素实例
代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- 前端笔记之React（二）组件内部State&React实战&表单元素的受控
一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- 6. React 表单使用介绍
表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...
- [转]React表单无法输入原因----约束性和非约束性组件
转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
- react 表单（受控组件和非受控组件）
我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 表单元素的submit()方法和onsubmit事件
1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...
随机推荐
- My mac cannot run 类相关的操作 , which is lower than 类相关的操作。
首先你选择的项目是mac项目, 其次,你MAC的系统版本小于你当前项目部署环境的最低支持版本 要么升级你的MAC系统,要么再project—>target设置developerme ...
- 基于PBOC电子钱包的圈存过程详解
基于pboc的电子钱包的圈存过程,供智能卡行业的开发人员参考 一． 圈存 首先终端和卡片有一个共同的密钥叫做圈存密钥:LoadKey (Load即圈存的意思,unLoad,是圈提的意思) 假设Lo ...
- 将SQLServer结果导出为excel文件
相信大家常常会遇到将SqlServer查询结果导出到Excel的问题.如果导出的次数少,直接“Save Results As...”就是了:但是当要分别在每个表取样,那就相当麻烦了.今天就为大家提供一 ...
- WebService相关概念介绍
最近重新拾起WebService,之前用过Axis2开发过服务,但是非常具体的概念还不是很清楚,在此粗略总结一下. 本文重点研究以下几个问题: 1.WebService以及相关的概念介绍 ...
- poj 1386 Play on Words 有向欧拉回路
题目链接:http://poj.org/problem?id=1386 Some of the secret doors contain a very interesting word puzzle. ...
- 【BZOJ】【4034】【HAOI2015】T2
树链剖分/dfs序 树上单点修改+子树修改+链查询 其实用dfs序做也可以…… 其实树链剖分就是一个特殊的dfs序嘛= =所以树链剖分也可以搞子树-(Orz ZYF) 至于为什么……你看在做剖分的时候 ...
- httpClient多线程请求
使用httpClient可模拟请求Url获取资源,使用单线程的请求速度上会有一定的限制,参考了Apache给出的例子,自己做了测试实现多线程并发请求,以下代码需要HttpClient 4.2的包,可以 ...
- C# 使用 AutoResetEvent 或 ManualResetEvent 同步两个线程
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Keil RTX systick 初始化
在STM32F215上移植Keil的RTX操作系统,随便设置下就能好使,但是当我想知道systick到底是怎么设置的时候,就得翻翻代码了,原来在 rt_HAL_CM.h中以一个内联函数的形式定义的 _ ...
- 安装软件(名称不记得了)后，系统开机提示 visual studio just-in-time debugger窗口（WINDOWS错误提示框）
出现这种情况,往往是因为原先安装有VS,后来因某些原因(比如:卸载)导致VS无法使用!!当系统中的有些软件出现错误时,会自动调用vs进行调试,但因为VS无法使用,就出现了visual studio j ...