【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 的支持下,近年来实现了飞越式的发展,我们 ...
随机推荐
- servlet与Javabean之间的区别
在JSP中调用JAVA类和使用JavaBean有什么区别? 可以像使用一般的类一样使用JavaBean,Bean只是一种特殊的类.特殊在可以通过<jsp:useBean/>调用JavaBe ...
- shell多进程
之前需要多进程程序都是python实现,闲来无事弄了下shell多进程,发现so easy(笑哭) 代码上: #!/bin/bash sleep 10 & sleep 5& wait ...
- lvs之 lvs原理架构介绍
一. 概念 lvs的术语: Router:GWIP vs:virtual server,director rs:real server CIP:client IP VIP:virtual server ...
- Java模拟http请求调用远程接口工具类
package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...
- 去除MyEclipse频繁弹出的Update Progress窗口
方法1: 1.关闭updating index Window => Preferences => Myeclipse Enterprise Workbench => Maven4My ...
- [css 实践篇] CSS box-orient
定义和用法 box-orient 属性规定框的子元素应该被水平或垂直排列. 提示:水平框中的子元素从左向右进行显示,而垂直框的子元素从上向下进行显示.不过,box-direction 和 box-or ...
- 宠物收养场 Treap
宠物收养场 时间限制: 1 Sec 内存限制: 128 MB 题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
- 将逗号分隔 的字符串转化成List
将逗号分隔 的字符串转化成List List<String> parIdListTmp = new ArrayList<String>(); String parIdArray ...
- php 函数形参前面加上&
<?php function test(&$a){ $a=$a+100; } $b=1; echo $b;//输出1 test($b);//这里$b传递给函数的其实是$b的变量内容所处的 ...