<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="my"></div>
<script type="text/babel">
class FormGroup extends React.Component{
constructor(props){
super(props)
this.state = {
name:'',
psd:'',
sex:'man',
city:'2',
}
}
handleChange(e){
let name = e.target.name;
this.setState({
[name]:e.target.value
})
};
 
submit(){
let data={
userName:this.state.name,
userPassWord:this.state.psd,
userSex:this.state.sex,
userCity:this.state.city
}
alert(JSON.stringify(data))
}
render(){
let cityArr=[
{name:'北京'},
{name:'上海'},
{name:'广州'},
]
return(
<div>
<label>姓名：</label>
<input name="name" type="text" value={this.state.name} onChange={(e)=>this.handleChange(e)}/>
{this.state.name}
<label>密码：</label>
<input name="psd" type="password" value={this.state.psd} onChange={(e)=>this.handleChange(e)}/>
{this.state.psd}
<input type="radio" name="sex" checked={this.state.sex=='man' ? true :false} value="man" onChange={(e)=>this.handleChange(e)}/>男
<input type="radio" name="sex" checked={this.state.sex=='woman' ? true :false} value="woman" onChange={(e)=>this.handleChange(e)}/>女
<label>城市：</label>
<select name="city" value={this.state.city} onChange={(e)=>this.handleChange(e)}>
{
cityArr.map((val,index)=>{
return <option key={index} value={index+1}>{val.name}</option>
})
}
</select>
<button onClick={()=>this.submit()}>提交</button>
</div>
)
}
}
ReactDOM.render(
<div>
<FormGroup/>
</div>,
document.getElementById('my')
)
</script>
</body>
</html>

react表单的一些小例子的更多相关文章

  1. react 表单获取多个input

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

  2. YII用户注冊和用户登录（二）之登录和注冊在视图通过表单使用YII小物件并分析

    2 登录和注冊在视图通过表单使用YII小物件并分析 <?php $form = $this -> beginWidget('CActiveForm', array( 'enableClie ...

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

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

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

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

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

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

  6. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  7. React表单元素的使用

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

  8. 6. React 表单使用介绍

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

  9. react表单事件和取值

    常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...

随机推荐

  1. javap 指令集

    栈和局部变量操作将常量压入栈的指令aconst_null 将null对象引用压入栈iconst_m1 将int类型常量-1压入栈iconst_0 将int类型常量0压入栈iconst_1 将int类型 ...

  2. js-将一个对象转换成一个新的对象

    /** * 对象转换成一个新的对象 * @param object * @private */ function _yh_tranformObject(object){ if(object == nu ...

  3. 每天一个linux命令(16):which

    1.命令简介 which (which) 命令的作用是在PATH变量指定的路径中搜索某个系统命令的位置并且返回第一个搜索结果.也就是说使用which命令就可以看到某个系统命令是否存在以及执行的到底是哪 ...

  4. Linux 搭建git 自己拉取本地 git pull，其他地方的git仓库拉取代码

    Linux 下建立 Git 与 GitHub 的连接 Git 是一款开源的分布式版本控制系统,而 GitHub 是依托 Git 的代码托管平台. GitHub 利用 Git 极其强大的克隆和分支功能, ...

  5. Tokyo Tyrant（TTServer）系列（一）－介绍和安装

    Tokyo Cabinet 是日本人Mikio Hirabayashi 开发的一款DBM 数据库,该数据库读写很快.哈希模式写入100 万条数据仅仅需0.643 秒.读取100 万条数据仅仅需0.77 ...

  6. Atitit 华为基本法 attilax读后感

    Atitit 华为基本法 attilax读后感 “精神对物质的比重是三比一” 认可拿破仑的这句格言 在20多年中国商业和企业史上,一个最基本.也是最大的现象就是,为什么"中国制造" ...

  7. 严选 | Elasticsearch史上最全最常用工具清单【转】

    1.题记 工欲善其事必先利其器,ELK Stack的学习和实战更是如此,特将工作中用到的“高效”工具分享给大家. 希望能借助“工具”提高开发.运维效率! 2.工具分类概览 2.1 基础类工具 1.He ...

  8. 用ajax下载字节流形式的excel文件

    原因:ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件. 解决方 ...

  9. mysql分区方案的研究

    笔者觉得,分库分表确实好的.但是,动不动搞分库分表,太麻烦了.分库分表虽然是提高数据库性能的常规办法,但是太麻烦了.所以,尝试研究mysql的分区到底如何. 之前写过一篇文章,http://www.c ...

  10. 【C#】读取Excel中嵌套的Json对象，Json带斜杠的问题（其一）

    策划填Excel表时,约定对于复杂类型的数据采用Json的格式填写.如下图,D列的内容是Json数据. 单元格中的Json如下. { "name": "BeJson2&q ...