<!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. js-将一个对象转换成一个新的对象

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

  2. Redis简单示例

    1.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工作由VMwa ...

  3. SSE图像算法优化系列二十三: 基于value-and-criterion structure 系列滤波器（如Kuwahara，MLV，MCV滤波器）的优化。

    基于value-and-criterion structure方式的实现的滤波器在原理上其实比较简单,感觉下面论文中得一段话已经描述的比较清晰了,直接贴英文吧,感觉翻译过来反而失去了原始的韵味了. T ...

  4. 找回停掉docker的文件

    如果容器还能重启,就restart, 如果状态是DEAD的话, Error response from daemon: Container is marked for removal and cann ...

  5. 采石厂管理系统V3.0版本上线（采石厂车辆出入管理系统，石厂开票系统）

    新版系统包含老版所有功能,软件基础功能请点击查看<采石管理系统,采石厂车辆出入管理系统> 新增功能点 近期对采石厂管理系统进行了升级和完善,系统更加灵活好用,应用场景更加广泛.主要更新一下 ...

  6. Navicat Win 和 Mac 视图类快捷键对比

    Navicat 查询是根据用户需求从数据库提取可读格式的数据,Navicat 提供两个强大的工具与 SQL 查询工作:查询创建工具和查询编辑器,查询创建工具可视觉化地创建查询,查询编辑器可直接编辑查询 ...

  7. 【ThinkPHP】ThinkPHP环境的安装与配置

    ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架. 严格来说,ThinkPHP无需安装过程,这里所说的安装其实就是把ThinkPHP框架放入WEB运行环境(前提是你的WEB ...

  8. Python之turtle画同心圆和棋盘

    画饼图 import turtle t = turtle.Pen() for i in range(5): t.penup() t.goto(0, -i*30) t.pendown() t.circl ...

  9. 纯CSS3浮雕质感的立体文字旋转动画

    还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...

  10. PCL点云配准（3）

    (1)关于点云的配准 1.首先给定源点云与目标点云. 2.提取特征确定对应点 3.估计匹配点对应的变换矩阵 4.应用变换矩阵到源点云到目标点云的变换 配准的流程图 通过特征点的匹配步骤 (1)计算源点 ...