<!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. 在web.xml中通过contextConfigLocation配置spring

    <context-param>         <param-name>contextConfigLocation</param-name>         < ...

  2. 转载 锁机制与原子操作 <第四篇>

    一.线程同步中的一些概念 1.1临界区(共享区)的概念 在多线程的环境中,可能需要共同使用一些公共资源,这些资源可能是变量,方法逻辑段等等,这些被多个线程共用的区域统称为临界区(共享区),临界区的资源 ...

  3. Oracle数据库查询优化（上百万级记录如何提高查询速度）

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  4. oracle备份信息查询

    SELECT TRIM(START_TIME || '#'),       TRIM(END_TIME || '#'),       TRIM(CASE OUTPUT_DEVICE_TYPE      ...

  5. centos7之docker安装

    下午四点左右,我准备接触docker这个技术.之所以接触它,原因来自tomcat服务器老是挂,也不能说老是挂,一周一次吧,或者不定时,最初出现的问题,分为这么几类? 一类,java代码的问题,某个类导 ...

  6. Qt Creator中如何选择某个子项目为启动项目

    Qt Creator中的子目录项目类似于Visual Studio中的Solution(解决方案),可以用来管理多个子项目.但是在Qt Creator IDE中由不能像Visual Studio中那样 ...

  7. Nginx-PHP优化设置 + lnmp调优的关键影响因素 + php-fpm + nginx返回码 + tcp调优 + 最大文件描述符

    https://www.cnblogs.com/zengkefu/p/5602473.html最大文件描述符 https://blog.csdn.net/fanren224/article/detai ...

  8. MFC入门（二）-- 提取输入框的字符串（定时关机的小程序）

    上篇文章已经让我们有了对于MFC最简单直观的认识,但貌似并无太大的交互性可言,而且其实也没有涉及到数据的交互,所以本文通过做一个时间可以调节的定时关机的Demo来演示. MFC入门(一)地址:http ...

  9. 4.3《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—链接到目录

    在4.2章中我们已经会用cd进入到指定的目录中.这是导航最常见的用途之一,但是它还有几个值得关注的用途.第一个是使用cd ..(读作'see-dee 点点')返回当前目录级别的上一级: $ pwd / ...

  10. 计算2个时间之间经过多少Ticks

    Ticks是一个周期,存储的是一百纳秒,换算为秒,一千万分之一秒.我们需要计算2个时间之间,经过多少Ticks,可以使用下面的方法来实现,使用2个时间相减. 得到结果为正数,是使用较晚的时间减去较早的 ...