一、

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>表单详解</title>
  6.  </head>
  7.  <body>
  8.      <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
  9.      <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
  10.      <script type="text/jsx">
  11.          var MyForm = React.createClass({
  12.              getInitialState: function () {
  13.                  return {
  14.                      username: "",
  15.                      gender: "man",
  16.                      checked: true
  17.                  };
  18.              },
  19.              handleUsernameChange: function (event) {
  20.                  this.setState({
  21.                      username: event.target.value
  22.                  });
  23.              },
  24.              handleGenderChange: function (event) {
  25.                  this.setState({
  26.                      gender: event.target.value
  27.                  });
  28.              },
  29.              handleCheckboxChange: function (event) {
  30.                  this.setState({
  31.                      checked: event.target.checked
  32.                  });
  33.              },
  34.              submitHandler: function (event) {
  35.                  event.preventDefault();
  36.                  console.log(this.state);
  37.              },
  38.              render: function () {
  39.                  return <form onSubmit={this.submitHandler}>
  40.                      <label htmlFor="username">请输入用户名:</label>
  41.                      <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} />
  42.                      <br />
  43.                      <select value={this.state.gender} onChange={this.handleGenderChange}>
  44.                          <option value="man">男</option>
  45.                          <option value="woman">女</option>
  46.                      </select>
  47.                      <br />
  48.                      <label htmlFor="checkbox">同意用户协议</label>
  49.                      <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} />
  50.                      <button type="submit">注册</button>
  51.                  </form>;
  52.                  }
  53.              });
  54.          React.render(<MyForm></MyForm>, document.body);
  55.      </script>
  56.  </body>
  57.  </html>

React表单元素的使用的更多相关文章

  1. React 表单元素实例

    代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  2. 前端笔记之React（二）组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  3. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  4. 6. React 表单使用介绍

            表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...

  5. [转]React表单无法输入原因----约束性和非约束性组件

    转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...

  6. react 表单（受控组件和非受控组件）

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  7. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  8. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  9. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

随机推荐

  1. Netsharp快速入门(之11) 销售管理(开发销售订单工作区)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 4.3     销售订单开发 4.3.1  部件工作区设置 1.创建部件工作区,建工作区向导中要注意勾选组合并系部分.具体要建立的部 ...

  2. MySQL中求年龄

    时间函数: 1.curdate() --- 当前系统日期 调取: select curdate() 2.curtime() --- 当前系统时间 调取: select curtime() 3.now( ...

  3. hdu 3046 Pleasant sheep and big big wolf 最小割

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3046 In ZJNU, there is a well-known prairie. And it a ...

  4. Net数值计算MathNet.Numerics类库

    一.Net自带的数值计算:System.Numerics 1.大整数BitInteger 方法:除数和余数.最大公约数 2.复数Complex 属性:实部.虚部.量值.相位 方法:共轭.倒数 二.Ma ...

  5. Android ADT中增大AVD内存后无法启动：emulator failed to allocate memory 8 (转)

    Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 8http://www.crifan.com/android_emulator_ ...

  6. 无法解决 equal to 运算中 &quot;Chinese_PRC_CI_AS&quot; 和 &quot;SQL_Latin1_General_CP1_CI_AS&quot; 之间的排序规则冲突。

    什么是排序规则(collation) 关于SQL Server的排序规则,估计大家都不陌生,在创建数据库时我们经常要选择一种排序规则(conllation),一般我们会留意到每一种语言的排序规则都有许 ...

  7. VC5509的通用GEL代码

    GEL是通用扩展语言(General Extension Language)的英文缩写,GEL是一个大小写敏感但缺少类型检测的解释性语言,只有int类型,在语法上可看作是C语言的一个子集.GEL主要用 ...

  8. Sqlite中使用rowid来表示行号，用于分页。

    在SQLite的查询结果中显示行号,可以使用select rowid as RowNumber ,* from WSCLanguage: select rowid as RowNumber ,* fr ...

  9. win7/8下VirtualBox虚拟Ubuntu共享文件夹设置

    实验环境: 主机:win8.1 虚拟机软件:VirtualBox4.3 虚拟的主机:centos6.5 final 亲测可用! 1. 安装增强功能包(VBoxGuestAdditions)  打开虚拟 ...

  10. 20+个可重复使用的jQuery代码片段

    jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...