<!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. Qt 编程指南 3_1 按钮弹窗手动和自动关联示例

    触发的两种模式 connect() 和 on_控件ID_控件函数(参数) 两者优缺点对比: 虽然 Qt 有比较好用的自动关联大法,但自动关联不是万能的,尤其是涉及到多个窗体的时候,比如 A 窗体私有按 ...

  2. 2017-2018-2 20155314《网络对抗技术》Exp9 Web安全基础

    2017-2018-2 20155314<网络对抗技术>Exp9 Web安全基础 目录 实验目标 实验内容 实验环境 基础问题回答 预备知识 实验步骤--WebGoat实践 0x10 We ...

  3. go标准库的学习-runtime

    参考:https://studygolang.com/pkgdoc 导入方式: import "runtime" runtime包提供和go运行时环境的互操作,如控制go程的函数. ...

  4. 这款 WordPress商用插件 0day 漏洞满满，且已遭利用

    Wordfence 安全研究员发布报告称,WordPress 商用插件 Total Donations 受多个 0day 漏洞的影响,且这些漏洞已遭利用. 这些严重的漏洞影响所有已知的 Total D ...

  5. python 数据结构 队列（queue）

    如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10293817.html 欢迎关注小婷儿的博客: 有问题请在博客下留言或加作者微信:t ...

  6. MySQL 基础三 函数（聚合、字符串、时间、条件判断）

    1.聚合 其它:GROUP_CONCAT.avg.sum.count.max.min SELECT typeid,GROUP_CONCAT(goodsname) FROM `goods` GROUP ...

  7. [03] Spring "Hello World"

    0.写在前面的话 本篇以一个简单的示例,描述了Spring通过容器对于Java类的装载和获取.在以下我们可以看到,有一个Java类Coder,我们全程并没有手动调用new来进行实例化,而是从Sprin ...

  8. 2011 noip 提高组

    首先吐槽:刚刚写着写着突然蓝屏了,,emmm,写到最后一题了蓝屏了. 当时我的内心是崩溃的. 然后,旁边的大佬默默来了一句:论保存草稿的重要性. 连着蓝了三次之后开了防火墙,然后,,我左边那位同学又开 ...

  9. 蓝牙baseband概述

    从蓝牙specispecification中看,基带协议主要分为8个部分来介绍的,分别是概述.物理信道.物理连接.逻辑传输.逻辑连接.封包.比特流的处理.组网行为.这里面会涉及到很多的概念,主要是在概 ...

  10. [清华集训2017]榕树之心[树dp]

    题意 题目链接 分析 首先解决 \(subtask3\) ,我们的策略就是进入子树,然后用其它子树来抵消,注意在子树内还可以抵消. 可以转化为此模型:有一个数列 \(a\) ,每次我们可以选定两个值 ...