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的升级.切换,应 ...
随机推荐
- XE5 ANDROID通过webservice访问操作MSSQL数据库
上接XE5 ANDROID平台 调用 webservice 一.服务端 在ro里添加函数(在impl上添加阿东connection,adoquery,dataprovider) function TN ...
- mysql 的数据类型
mysql 的数据类型(描述的是字段)三大类:一.整型:1.tinyint(M),其中M是显示宽度,需要配合zerofill,就是前面0填充,存储单位为1个字节(8位),无符文是最大能存储范围0000 ...
- linux c 打印彩色字符
#include <stdio.h> #include <string.h> int main(int argc, char **argv) { , j = , str_len ...
- 试图使用未在此报表服务器中注册或此版 Reporting Services 不支持的数据扩展插件“Devart.Data.PostgreSql”
数据源用的是Postgresql 我在Deploy Report的时候出现这条ErrorMessage Error 2 试图使用未在此报表服务器中注册或此版 Reporting Services 不支 ...
- C# 时间戳
C# 时间与时间戳互转 13位 /// <summary> /// 将c# DateTime时间格式转换为Unix时间戳格式 /// </summary> /// <pa ...
- linux总线、设备和设备驱动的关系
之一:bus_type 总线是处理器和一个或多个设备之间的通道,在设备模型中,所有的设备都通过总线相连,甚至是内部的虚拟"platform"总线.可以通过ls -l /sys/bu ...
- 首页视频播放jquery
<script type="text/javascript" src="[!--news.url--]skin/default/js/flowplayer-3.2. ...
- mysql5.5 Replication 主从同步
mysql5.5 Replication 主从同步 ------------------[主]------------------[mysqld]server-id=1 log-bin=mysql-b ...
- Window.ActiveXObject的用法 以及如何判断浏览器的类型
(window.ActiveXObject) 什么意思? 解:判断浏览器是否支持ActiveX控件,如果浏览器支持ActiveX控件可以利用 var xml=new ActiveXObject(&qu ...
- 【BZOJ 1090】[SCOI2003]字符串折叠
Description 折 叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S S 2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S) SSSS…S(X个S). ...