【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 的支持下,近年来实现了飞越式的发展,我们 ...
随机推荐
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（84）-Quartz 作业调度用法详解一
前言 我从Quartz2.0开始使用,并对其进行了封装了界面,可以参考 http://www.cnblogs.com/ymnets/p/5065154.html 最近拿出来进行了优化,并升级到最新版, ...
- Java IO学习笔记四
内存操作流 之前的所有的流操作都是针对文件的,但是有时候只是想要实现数据间转换,此时如果我们想要创建一个文件然后再删除文件,那样显得有点麻烦,因此此时的内存操作流就显得很适合这类的操作,因为它只是在内 ...
- python 标准库 -- shutil
shutil shutil.move(src,dst) shutil.move('/tmp/20170223/new','/tmp/20170223/test') # 移动文件, 重命名等 shuti ...
- android设置横竖屏
android:screenOrientation="portrait"
- PHPCMS v9 自定义表单添加验证码
1. 在 \phpcms\templates\default\formguide\show.html 中添加验证码显示 <input type="text" id=&quo ...
- 基于FPGA的IIR滤波器
基于FPGA的IIR滤波器 by方阳 版权声明:本文为博主原创文章,转载请指明转载地址 ...
- [HNOI2007]紧急疏散EVACUATE （湖南2007年省选）
[HNOI2007]紧急疏散EVACUATE 题目描述 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是'X',那么表示这是一面 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
- linux下安装QT5：error: unrecognized command line option ‘-fuse-ld=gold’
安装qt时在执行./configure时报错:error: unrecognized command line option '-fuse-ld=gold' 这个错误是qt的一个bug. 在装有gol ...
- RDLC报表纵向合并单元格。
在做RDLC报表时发现居然没有纵向合并单元格,震惊! 网上查了一些资料,有些方法很可爱,采用去除边框法,但是用这种方法如果要求文本属性居中的话那则达不到美观效果,还有些复杂一点的方法,我都没耐心看,然 ...