【JAVASCRIPT】React 学习 - 登录实战
摘要
实现一个登录的react 组件， 包含组件更新、ajax 交互、渲染新组建。
代码
<head>
<meta charset="utf-8">
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="loginForm"></div>
<script type="text/babel">
var LoginForm = React.createClass({
getInitialState: function(){
return {
username: '',
password: '',
info: ''
};
},
handlerNameChange: function(event) {
var name = event.target.value;
// 验证name 有效性
if (name.length < 2) {
this.setState({name: name, info: '名称长度过短'});
}else {
this.setState({name: name, info: ''});
}
},
handlePasswordChange: function(event) {
var password = event.target.value;
// 验证password是否有效
if (password.length < 2) {
this.setState({password: password, info: '密码长度过短'});
}else {
this.setState({password: password, info: ''});
}
},
handlerLogin: function(event) {
var that = this;
var name = this.state.name;
var password = this.state.password;
if ((name.length < 2) || (password.length < 2)) {
that.setState({info: '名称/密码长度过短'});
}else {
// 模拟发送ajax 请求
$.ajax({
url: 'https://api.github.com/search/repositories?q=javascript&sort=stars',
type: 'get',
}).done(function(data) {
var incomplete_results = data.incomplete_results;
if(!incomplete_results) {
// that.setState({info: '登录成功'});
ReactDOM.render(<SuccessForm/>, document.getElementById('loginForm'));
}else {
that.setState({info: '登录失败，请检查名称or密码是否正确'});
}
});
}
},
render: function(){
return (
<div>
<div>姓名：<input type="text" value={this.state.name} onChange={this.handlerNameChange}/></div>
<div>密码：<input type="password" value={this.state.password} onChange={this.handlePasswordChange} /></div>
<div><span>{this.state.info}</span><button onClick={this.handlerLogin} type="button">登录</button></div>
</div>
);
}
});
ReactDOM.render(<LoginForm/>, document.getElementById('loginForm'));
var SuccessForm = React.createClass({
render: function() {
return (
<div>Success!</div>
);
}
});
</script>
【JAVASCRIPT】React 学习 - 登录实战的更多相关文章
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流（组件通信）
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
- 【JAVASCRIPT】React学习- 与 flux 结合使用
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 与flux 结合使用
- 【JAVASCRIPT】React学习- 杂七杂八
摘要 记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...
- 2019 年 React 学习路线图(转)
转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框 ...
- webpack4 中的最新 React全家桶实战使用配置指南！
最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获, ...
- Javascript的学习清单
Javascript的学习清单 Javascript学习资源 程序员必读书籍 深入理解JavaScript系列 es6教程 jQuery中文文档 vue官网 zeptojs中文版 常用的插件与UI组件 ...
- 2019年React学习路线图
作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们 ...
随机推荐
- APUE-文件和目录（六）函数ftw和nftw
名字 ftw,nftw - 文件树遍历 概要 #include <ftw.h> int nftw(const char *dirpath, int (*fn) (const char *f ...
- [BZOJ2707]走迷宫
Description Morenan被困在了一个迷宫里.迷宫可以视为N个点M条边的有向图,其中Morenan处于起点S,迷宫的终点设为T.可惜的是,Morenan非常的脑小,他只会从一个点出发随机沿 ...
- 使用 Python 进行并发编程 -- asyncio (未完)
参考地址 参考地址 参考地址 Python 2 时代, 高性能的网络编程主要是使用 Twisted, Tornado, Gevent 这三个库. 但是他们的异步代码相互之间不兼容越不能移植. asyn ...
- Google云平台技术架构
Google Cloud 设计原理: 1.分布式文件系统: Google Distributed File System(GSF) 为了满足Google迅速增长的数据处理需求,我们设计并实现了G ...
- Windows Server AppFabric分布式缓存研究
分享一则先前对Windows Server AppFabric分布式缓存的技术研究. 一. AppFabric 技术架构和原理 AppFabric与Memcached类似,采用C/S的模式,在 ser ...
- spingMVC aop不生效的解决方式
从网上搜索了一些资料,参考了下面的这个解决方案 http://blog.csdn.net/mmm333zzz/article/details/16858209
- 响应式、手机端、自适应 百分比实现div等宽等高的方法
在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话,我们在这种情况下考虑到适应各种媒体尺寸,又不能给它定固定的宽高. 之前遇见过纯色布局的结果我就用纯色图片代替实现的,现在有了 ...
- 【从零开始】用node搭建一个jsonp&json服务
目录: 一.介绍 二.node安装 三.webstorm配置node环境 四.代码介绍 五.如何使用 六.自定义域名 七.其他 一.介绍 1.背景 日常工作中,跟后端商定好接口格式后:通常采用 ...
- React 在服务端渲染的实现
原文地址:Server-Side React Rendering 原文作者:Roger Jin 译者:牧云云 React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架, ...
- 详细介绍Java虚拟机（JVM）
1. JVM生命周期 启动.启动一个Java程序时,一个JVM实例就产生了,任何一个拥有public static void main(String[] args)函数的class都可以作为JVM实例 ...