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的升级.切换,应 ...
随机推荐
- PHP实现链式操作的原理
在一个类中有多个方法,当你实例化这个类,并调用方法时只能一个一个调用,类似: db.php <?php class db{ public function where() { //code he ...
- openerp经典收藏 深入理解报表运行机制（转载）
深入理解报表运行机制 原文:http://blog.sina.com.cn/s/blog_57ded94e01014ppd.html 1) OpenERP报表的基本运行机制 OpenERP报表的 ...
- MVVM学习
1:MVVMLight中通过IOC注册的服务或者是类是全局的整个工程都能访问到 2:向下的结构(viem→VM→Model)也不严格是这样 3:延迟SimpleIoc的注册 4:在Navigatedt ...
- 【F#】 WebSharper框架
WebSharper,它是一个基于F#构建的Web开发平台,使用F#构造从前到后的一整套内容.其中利用到F#中许多高级的开发特性,并可以将F#代码直接转化JavaScript,这样服务器端和客户端的通 ...
- windows2003通过iis配置ftp服务器
以前习惯于用filezilla作为windows的ftp服务器,但是现在新版本的filezilla已经不支持windows2003了,所以趁机试一下iis配置ftp服务器. 前面都是很常规的配置 参考 ...
- 如何在LINUX VPS上安装VPN详细步骤
在vps上安装vpn是个难点,很多朋友都不会,这儿结合一位朋友的安装经验做下介绍.注意你的vps要安装做vpn使用,一定要注意你的流量限制,使用Vpn上游戏上youtube看视频等都比较耗费资源,否则 ...
- Ubuntu12.04更新源地址列表
1. 修改更新源 sudo gedit /etc/apt/sources.list 2. 比较全的更新源列表中一般都包含deb和对应的deb-src. deb和对应的deb-src一般都包含preci ...
- 例题-文件系统的放大 (LVM)：
纯粹假设的,我们的 /home 不够用了,你想要将 /home 放大到 7GB 可不可行啊? 答: 因为当初就担心这个问题,所以 /home 已经是 LVM 的方式来管理了.此时我们要来瞧瞧 VG 够 ...
- 三大主流开源硬件对比：Arduino vs BeagleBone vs Raspberry Pi
个人总结: Arduino就是个AVR单片机,个人觉得更适合玩电子的,社区也很活跃. BeagleBone是ARM Cortex-A8,属于嵌入式,价格高于Pi,但是许多方面拥有超越 Pi 的优 势, ...
- Understand User's Intent from Speech and Text
http://research.microsoft.com/en-us/projects/IntentUnderstanding/ Understanding what users like to d ...