【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 的支持下,近年来实现了飞越式的发展,我们 ...
随机推荐
- od的用法
一.功能 查看非文本文档的内容 二.用法 1.语法 od [-A RADIX] [-t TYPE] 文件名 2.选项与参数 -A: 指定偏移量的输出形式 d[size] :利用十进制(decimal) ...
- MYSQL导入数据报错|MYSQL导入超大文件报错|MYSQL导入大数据库报错：2006 - MySQL server has gone away
导SQL数据库结构+数据时,如果数据是批量插入的话会报错:2006 - MySQL server has gone away. 解决办法:找到你的mysql目录下的my.ini配置文件(如果安装目录没 ...
- 第二章完结，包含exam练习
正则方程(Normal Equation) 梯度下降是最小化代价函数\(J(\theta)\)的一种方式,这里提出了另一种方式即正则方式不使用迭代方式:\(\theta = (X^TX)^{-1}X^ ...
- Python 任务队列 Celery
一. celery 简介 Celery 是一个专注于实时处理和任务调度的分布式任务队列, 同时提供操作和维护分布式系统所需的工具.. 所谓任务就是消息, 消息中的有效载荷中包含要执行任务需要的全部数据 ...
- ubuntu16.04-x64系统中Jexus web server部署.NetCore和端口分析引发的猜想！
您有这样的牢骚么? 有一周没更新博客了,简单说下在干什么吧:主要是公司安排对接某旅游大公司的接口,接口数量倒也就10个左右,对接完后还需要加入到业务系统中和App端,因此还是需要花点时间的:时间上来说 ...
- kaggle Titanic心得
Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...
- Haoop MapReduce 的Partition和reduce端的二次排序
先贴一张原理图(摘自hadoop权威指南第三版) 实际中看了半天还是不太理解其中的Partition,和reduce端的二次排序,最终根据实验来结果来验证自己的理解 1eg 数据如下 20140101 ...
- C#中的Dictionary的使用
在工作中有时候会用到Dictionary,由于自己之前没用过,参考了一下前人和先辈的实践,仿照着写了一个Test,第一次用还不是很熟练,要多实践练习才能用的得心应手,写代码重在敲键盘,以此为诫.(主要 ...
- 去掉CI框架默认url中的index.php
1:.htaccess //放置在根目录下,和入口文件index.php的同级目录<IfModule mod_rewrite.c>RewriteEngine onRewriteCond % ...
- css实现居中的五中方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...