<!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. k8s监控api调用

    k8s监控api调用 curl -s --cacert /etc/kubernetes/ssl/ca.pem -basic -u fengjian:fengjian --insecure -X GET ...

  2. intellij idea 修改背景保护色&&修改字体&&快捷键大全(转)

    文章转自http://blog.csdn.net/hpf911/article/details/16888797 近Idea比较流行,Eclipse因为maven的问题,运行起来非常慢,各种提示也不够 ...

  3. SSM框架之整合(Maven实例)

    有不少朋友在maven中因为pom文件依赖的事导致报错 今天我这个快速搭建ssm框架,确保在jdk7或者jdk8的环境,tomcat没什么要求.但如果要用jdk8的话,最好用run as中的serve ...

  4. nginx环境搭建

    nginx安装步骤 安装nginx[root@insure opt]# yum install nginx启动nginx [root@insure opt]# service nginx start ...

  5. httpclient原理

    http.tcp/ip和socket的区别,用一个序列图概括最合适 网络上的跨域请求,都是以URL的方式发送请求,后端接收.标准的http请求格式包括header和body,传输到服务端 应用的协议都 ...

  6. LOJ558 我们的 CPU 遭到攻击 LCT

    传送门 题意:写一个数据结构,支持森林上:连边.删边.翻转点的颜色(黑白).查询以某一点为根的某棵树上所有黑色点到根的距离和.$\text{点数} \leq 10^5 , \text{操作数} \le ...

  7. 深入理解 JS 引擎执行机制（同步执行、异步执行以及同步中的异步执行）

    首先明确两点: 1.JS 执行机制是单线程. 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行. 单线程执行带来什么问题? 在JS执行中都是单 ...

  8. 【JVM.6】虚拟机类加载机制

    一.概述 虚拟机类加载机制:虚拟机把描述类的数据从Class文件中加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型. 与那些在编译时需要进行连接工作的语言不同 ...

  9. Flutter - 退出App

    Flutter退出App的方法一般有两种 ①SystemNavigator.pop 推荐 onTap: () async { await pop(); }, static Future<void ...

  10. OpenTK教程-2绘制一个三角形（正确的方式）

    上一个教程向我们展示了如何在屏幕上画一个三角形.但是,我说过,那是一种古老的方式,即使它能够正常运行,但是现在这已经不是"正确"的方式.上篇文章中我们将几何发送到GPU的方式是所谓 ...