<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var FormComponent = React.createClass({
    getInitialState:function(){
      return {
            user_name:'web1609',
            user_sex:'1',
            user_isAgree:true
            };
    },
    handleSubmit:function(event){
      event.preventDefault();
      console.log(this.state);
    },
    handleChangeName:function(event){
      this.setState({user_name:event.target.value})
    },
    handleChangeSex:function(event){
      this.setState({user_sex:event.target.value})
    },
    handleChangeIsAgree:function(event){
      this.setState({user_isAgree:event.target.checked})
    },
    render:function(){
      return <form onSubmit={this.handleSubmit}>
        <label htmlFor="userName">请输入用户名</label>
        <input  value={this.state.user_name}
                onChange={this.handleChangeName}
                type="text" id="userName"/>
        <br/>
        <label htmlFor="userSex">请选择性别</label>
        <select id="userSex"
                value={this.state.user_sex}
                onChange={this.handleChangeSex}>
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
        <br/>
        <label htmlFor="userIsAgree">是否同意本站协议</label>
        <input type="checkbox"
               checked={this.state.user_isAgree}
               onChange={this.handleChangeIsAgree}
               id='userIsAgree'/>
        <br/>
        <input type="submit" value='注册'/>
      </form>
    }
  })

  ReactDOM.render(
  <FormComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React 表单受控组件的更多相关文章

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

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

  2. react 表单受控和非受控

    参见:https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ 非受控: onSubmit = ()=>{ const val ...

  3. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  4. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  5. vue_表单_组件

    表单.组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  7. ccflow_005.请假流程-傻瓜表单-审核组件模式

    ccflow_005.请假流程-傻瓜表单-审核组件模式 ' 用审核组件演示各个流程应用 首先设置节点,填写请假单的 表单方案.选择内置傻瓜表单.我们之前创建的表单就回来了. 可以点击下面的设计傻瓜表单 ...

  8. Form表单验证组件

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  9. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

随机推荐

  1. df 与 du 已使用空间不一致的原因及解决办法

    通过 df -Th 查看 /var 目录使用了78%, 当登录到/var 目录,du -sh 实际使用112G 分析原因:应该是被删掉的文件 没被真正释放 解决办法: 1.lsof | grep de ...

  2. MATLAB中floor、round、ceil、fix区别

    Matlab取整函数有: fix, floor, ceil, round.具体应用方法如下:fix朝零方向取整,如fix(-1.3)=-1; fix(1.3)=1;floor,顾名思义,就是地板,所以 ...

  3. SkylineGlobe 移动端开发测试

    基于SkylineGlobe提供的安卓版本SDK,在已有菜单中增加自定义内容,测试代码如下: 新增加文件ZhaoHeContainer.java package com.skyline.terraex ...

  4. Windows 系统安装Docker Compose 步骤

    参考 Docker Compose official 官方安装指南: https://docs.docker.com/compose/install/ 实际上到目前为止还不能直接在Windows上安装 ...

  5. Python常见十六个错误集合，你知道那些？

    使用python会出现各种各样的错误,以下是Python常见的错误以及解决方法. 1.ValueError: 'Conv2d_1a_3×3' is not a valid scope name 这个是 ...

  6. php中按值传递和按引用传递的一个问题

    php中传递变量默认是按照值传递. 简单举个例子: <?php function testArray($arr){// &$arr $arr = array(1,2,3,); } $ar ...

  7. SQL Server聚合函数与聚合开窗函数 （转载）

    以下面这个表的数据作为示例. 什么是聚合函数?聚合函数:聚合函数就是对一组值进行计算后返回单个值(即分组).聚合函数在计算时都会忽略空值(null).所有的聚合函数均为确定性函数.即任何时候使用一组相 ...

  8. BZOJ3252 攻略 贪心、长链剖分

    传送门 给树竟直接给父子关系!!!真良心 首先一个贪心策略:每一次选择的链一定是所有链中权值最大的.这应该比较显然 那么我们接下来考虑如何维护这个贪心.我们可以使用长链剖分进行维护,对权值进行长链剖分 ...

  9. Git .gitignore文件的使用

    本文转载自 http://blog.csdn.net/xmyzlz/article/details/8592302 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .giti ...

  10. [Oracle][Corruption]发生ORA00600[kdsgrp1]的时候，如何进行调查

    本质上,这很可能是坏块引发的,所以需要调查 关联的Table 中的坏块状况: Excerpt of trace file============================*** 2017-08- ...