React表单组件自定义-可控及不可控组件
一、可控组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var Radio = React.createClass({
getInitialState: function () {
return {
value: this.props.defaultValue
};
},
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event); }
this.setState({
value: event.target.value
});
},
render: function () {
var children = {};
var value = this.props.value || this.state.value;
React.Children.forEach(this.props.children, function (child, i) {
var label = <label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
{child.props.children}
<br/>
</label>;
children['label' + i] = label;
}.bind(this));
return <span>{children}</span>;
}
});
var MyForm = React.createClass({
getInitialState: function () {
return {my_radio: "B"};
},
handleChange: function (event) {
this.setState({
my_radio: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.my_radio);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
二、不可控组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var Radio = React.createClass({
getInitialState: function () {
return {
value: this.props.defaultValue
};
},
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event);
}
this.setState({
value: event.target.value
});
},
render: function () {
var children = {};
var value = this.props.value || this.state.value;
React.Children.forEach(this.props.children, function (child, i) {
var label = <label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
{child.props.children}
<br/>
</label>;
children['label' + i] = label;
}.bind(this));
return <span>{children}</span>;
}
});
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
alert(this.refs.radio.state.value);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio ref="radio" name="my_radio" defaultValue="B">
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
React表单组件自定义-可控及不可控组件的更多相关文章
- react 表单组件 异步渲染，值不会生效，需要手动改变对应组件的显示值
楼主遇到这个问题已经是第二次,上次我们项目经理给帮忙解决了一次,这次又遇到了,刚开始不知道是这个问题,上次做的笔记也没找到了,估计又忘记了,这里抽三分钟记录一下, 当然这里这样做有个前提:就是你已经和 ...
- ReactJS实用技巧（2）：从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- reactjs入门到实战（八）----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
- 如何实现Ant design表单组件封装？
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- 使用iview 的表单组件验证 Upload 组件
使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...
- 【form】 表单组件说明
form表单组件 1)将form组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...
- 通过html()的方法获取文本内容， form表单组件显示的值与获取到的值不一致的问题
我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...
- django基础之day09，创建一个forms表单组件进行表单校验，知识点：error_messages，label，required，invalid，局部钩子函数，全局钩子函数， forms_obj.cleaned_data，forms_obj.errors，locals()， {{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...
- 文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
随机推荐
- 初步了解SequoiaDB数据库
随着企业中日益复杂与多变的需求,以及迅速扩展带来的海量数据的业务,IT部门需要将越来越多的信息提供给用户,同时在现今的全球经济背景环境下,IT部 门还需要在提供高效服务的同时,降低其设备与程序维护成本 ...
- CF 148A Insomnia cure
题目链接:传送门 题目大意:就是给四个数,和一个d,问1-d中有多少个数字不是那四个数的倍数; 这道题的d数据很小直接暴力可以过: 暴力代码:时间复杂度O(1): #include<stdio. ...
- URI、URL以及URN的区别
首先,URI,是uniform resource identifier,统一资源标识符,用来唯一的标识一个资源.而URL是uniform resource locator,统一资源定位器,它是一种具体 ...
- 如何在SAE上使用DjangoUeditor
之前的一个项目是部署到SAE上的,其中富文本编辑器使用到了Ueditor,对于Django有一个开源项目DjangoUeditor可以简化继承过程,直接引用app就可以使用.但是不支持SAE的文件上传 ...
- WPF的UI布局（Layout）WPF读书笔记（第三天）
WPF的布局元素有一下几个 Grid:网格.可以自定义行和列并且通过行列的数目.行高和列宽来调整控件的布局. StackPanel:格式面板.可将包含的元素在水平方向或者竖直方向排成一条线. ...
- WPF 气泡尖角在左边、下面、右边、上面
由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...
- 用Python作GIS之一：介入STARS
STARS的全称是Space-Time Analysis of Regional Systems,直译过来就是区域系统时空分析软件.这是针对区域多时相数据的分析包,源代码公开.该软件将最近几年发展起来 ...
- mysql学习笔记之基础篇
数据库学习之基础篇 ① 开放数据库互连(Open Database Connectivity,ODBC ② 结构化查询语言(Structured Query Language) ③ 进入mysql:M ...
- cdev_系列函数
内核中每个字符设备都对应一个 cdev 结构的变量,下面是它的定义: linux-2.6.22/include/linux/cdev.h struct cdev { struct kobject ...
- glog使用
How To Use Google Logging Library Glog 的基本使用方法在google code上有介绍:How To Use Google Logging Library ;最好 ...