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="UTF ...
- 前端笔记之React（二）组件内部State&React实战&表单元素的受控
一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- HTML5 总结-表单-表单元素
HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input typ ...
- HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...
- HTML 表单元素、 输入类型、Input 属性
<input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...
- H5 表单元素
HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input typ ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- 6. React 表单使用介绍
表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...
随机推荐
- Codeforces 364D 随机算法
题意:给你一个序列,定义ghd为一个序列中任意n / 2个数的gcd中最大的那个,现在问这个序列的ghd为多少. 思路:居然是论文题...来自2014年国家集训队论文<随机化算法在信息学竞赛中的 ...
- Retrofit总结（原）
1.Retrofit的作用 A type-safe HTTP client for Android and Java 看到这句话时候在想什么是类型安全? 百度一下:类型安全代码指访问被授权可以访问的内 ...
- windows下基于(QPC)实现的微秒级延时
1.为什么会写windows下微秒级延时 在上一篇 实现memcpy()函数及过程总结 中测试memcpy的效率中,测试时间的拷贝效率在微秒级别,需要使用微秒级时间间隔计数. windows下提供Qu ...
- java运算注意事项
/* 对于byte.short.char.插入三种类型来说,如果右侧固执的数值没有超过范围,那么java编译器就会自动隐含地位我们 补上一个(byte) ,(short),(char) 1.如果没有超 ...
- 转载 Struts2的配置 struts.xml Action详解
在学习struts的时候,我们一定要掌握struts2的工作原理.只有当我们明确了在struts2框架的内部架构的实现过程,在配置整个struts 的框架时,可以很好的进行逻辑上的配置.接下来我就先简 ...
- zabbix监控nginx status页面
在需要添加监控的nginx配置文件中添加下列配置 #zabbix监控nginx配置 location /nginx_status { stub_status on; access_log off; a ...
- 【leetcode】910. Smallest Range II
题目如下: 解题思路:我的思路是先找出最大值.对于数组中任意一个元素A[i]来说,如果A[i] + K 是B中的最大值,那么意味着从A[i+1]开始的元素都要减去K,即如果有A[i] + K > ...
- 每天一个linux命令：touch(9)
touch touch命令有两个功能:一是用于把已存在文件的时间标签更新为系统当前的时间(默认方式),它们的数据将原封不动地保留下来:二是用来创建新的空文件 格式 touch [选项] [文件] 参数 ...
- QT树莓派交叉编译开发环境搭建
QT树莓派交叉编译开发环境搭建 - JerryZone <Cross-compiling Qt Embedded 5.5 for Raspberry Pi 2> <Qt for Em ...
- Network基础(二)：数制转换
一.数制转换 目标: 1)请将下列数字转换为十进制数: (110010011111)2 .(10110101110)2 2)请将下列十进制数转换为二进制: 156.2608.1043 方案: 使用按权 ...