【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 的支持下,近年来实现了飞越式的发展,我们 ...
随机推荐
- Spring学习（12）--- @Autowired与@Resource 对比
Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...
- JDBC加载数据库驱动的方式
JDBC作为数据库访问的规范接口,其中只是定义一些接口.具体的实现是由各个数据库厂商来完成. 一.重要的接口: 1.public interface Driver 每个驱动程序类必须实现的接口.Jav ...
- 学习总结------用JDBC连接MySQL
1.下载MySQL的JDBC驱动 地址:https://dev.mysql.com/downloads/connector/ 为了方便,直接就选择合适自己的压缩包 跳过登录,选择直接下载 下载完成后, ...
- RSA加密通信小结（三）--生成加解密所需的SSL命令与流程
在iOS中使用RSA加密解密,需要用到.der和.p12后缀格式的文件,其中.der格式的文件存放的是公钥(Public key)用于加密,.p12格式的文件存放的是私钥(Private key)用于 ...
- Python原理 -- 深浅拷贝
python原理 -- 深浅拷贝 从数据类型说开去 str, num : 一次性创建, 不能被修改, 修改即是再创建. list,tuple,dict,set : 链表,当前元素记录, 下一个元素的位 ...
- ECSHOP购物车页面显示商品简单描述
1.这里说的商品简单描述,不是商品的详细信息,而是后台编辑商品时在“其他信息”标签栏填写的那个“商品简单描述”,即goods_brief字段 2.修改lib_order.php文件的get_cart_ ...
- IBM新合作伙伴计划助力企业转型升级
IBM作为老牌企业,一直在引领者技术方面的变革.当IBM再一次从自我革新开始,期望能够更快的将认知计算和云推广给自己的合作伙伴和用户们,以帮助他们在新的转型期内,能够快人一步. ...
- IDEA报错处理：Application Server was not connected before run configuration stop, reason: Unable to ping server at localhost:8080
把wildfly的整个软件包更换成新的,配置文件重新配置,JBOSS_HOME环境变量修改成新的,在wildfly-10.1.0.FinalForTest\modules\system\layers\ ...
- linux查询进程号,出现两个进程
[root@ADM01B ~]# ps -ef|grep iesmgr root 5929 5321 0 09:38 pts/7 00:00:00 grep iesmgr root 9798 1 0 ...
- spring的Convert机制
spring.core包内有Converter接口,方法是T convert(S source);从一个类型转为内容一个类型的实际转化器:converters可能非常多,需要一个注册器来集中管理使用, ...