怎么用react写登陆框


怎么用react写登陆框

1、创建一个Login组件,添加userName和userPassword状态;

2、为输入框绑定onChange事件到changeUsername和changePassword函数中;

3、为登录按钮绑定点击事件到handleClick函数中;

4、在handleClick中对userName和userPassword进行为空判断,若为空就做出相应的提示。

import React,{ Component } from 'react';
import style from 'cms.css';
/**
 * 路由路径 登录成功后页面跳转到index
 */
import { index } from 'config';
export default class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            userName: "",
            userPassword: "",
            isRemember: false,
            unameHelp: "",
            upwdHelp: ""
        }
    }
    //监听input中的数据,保存到state中
    changeUsername(e){
        let uname = e.target.value;
        this.setState({
            userName: uname
        });
        console.log(this.state.userName);
    }
    changePassword(e){
        let upwd = e.target.value;
        this.setState({
            userPassword: upwd
        })
    }
    //是否记住密码
    handleCheckbox(e){
        let isChecked = e.target.checked;
        if(isChecked){
            this.setState({
                isRemember: true
            })
        }else{
            this.setState({
                isRemember: false
            })
        }
    }
    //点击登录按钮,触发后台接口提供的验证,对数据的处理等方法
    handleClick(){
        if(this.state.userName === ""||this.state.userName === null){
            this.setState({
                unameHelp: "* 用户名不能为空"
            })
        }else if(this.state.userPassword === ""||this.state.userPassword === null){
            this.setState({
                unameHelp: "",
                upwdHelp: "* 密码不能为空"
            })
        }else{
            this.setState({ //清除help-block提示文字
                unameHelp: "",
                upwdHelp: ""
            });
  
            if(this.state.isRemember === true){ //是否记住密码,若记住,
            则保存至localstorage,反之,清除
                // let loginData = {this.state.userName,this.state.userPassword};
                let loginData = {};
                loginData.userName = this.state.userName;
                loginData.userPassword = this.state.userPassword;
                Data.localSetItem("mm_loginStatus",loginData);
            }else{
                Data.localRemoveItem("jiaj-loginStatus");
            }
  
            this.props.login(this.state.userName,this.state.userPassword);
            console.log(this.state);
        }
    }
    render(){
        return (
            <div className="login-box">
                <div className="login-title">登   录</div>
                <form action="" className="form-horizontal">
                    <div className="form-group input-text">
                        <label htmlFor="uname">账号</label>
                        <input type="text" className="form-control" 
                        name="username" id="uname" ref="uname" p
                        laceholder="手机号/用户名"
                         onChange={this.changeUsername.bind(this)}/>
                        <span className="help-block">{this.state.unameHelp}
                        </span>
                    </div>
                    <div className="form-group input-text">
                        <label htmlFor="upwd">密码</label>
                        <input type="password" className="form-control" 
                        name="password" id="upwd" ref="upwd" 
                        placeholder="密码"
                       onChange={this.changePassword.bind(this)}/>
                        <span className="help-block">{this.state.upwdHelp}
                        </span>
                    </div>
                    <div className="form-group">
                        <label htmlFor="chk" className="check">
                            <input type="checkbox" id="chk" 
                            checked={this.state.isRemember} 
                            onClick={this.handleCheckbox.bind(this)} />
                            <span>记住密码</span>
                        </label>
                    </div>
                    <div className="form-group">
                        <button type="button" 
                        onClick={this.handleClick.bind(this,this.state.userName,
                        this.state.userPassword)} className="btn 
                        btn-primary login-btn">登录</button>
                    </div>
                </form>
            </div>
        )
    }
}
    /**************登录(WXP)****************/
    .login-box{
    width: 60%;
    background: #e0e8e0;
    margin: 100px auto;
    padding: 50px 70px;
    box-shadow: 5px 5px #ddd;
    border-radius: 5px;
}
.login-title{
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}
.input-text>label{
    display: inline-block;
    width: 15%;
}
.input-text>input{
    display: inline-block;
    width: 80%;
}
.check{
    margin-left: 15%;
    width: 40%
}
.check>span{
    margin-left: 3%;
}
.login-btn{
    margin-left: 15%;
    width: 80%;
    font-size: 16px;
}
.help-block{
    color: #e4393c;
    height: 20px;
    font-size: 12px;
    margin-left: 15%;
}
Image placeholder
前端答疑
未设置
  57人点赞

没有讨论,发表一下自己的看法吧

推荐文章
怎么用react写界面

怎么用react写界面用react写页面,官方的做法是采用jsx语法,JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内

如何用react写页面跳转

如何用react写页面跳转1、使用react-router-dom中的Link实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:import{Link}from'react-r

如何用react写轮播?

前提:安装好Node.js安装。【推荐阅读:nodejs怎么下载安装?】步骤:1、安装swiper使用node包管理器npm来安装swipernpminstallswiper--save2、在轮播组件

用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

用react怎么插图片

用react怎么插图片1、img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片需要用下面的方式引入2、背景图片引入1第一种就是常规的新建

如何用react做增删

如何用react做增删1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把i

如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

如何使用react做安卓app

如何使用react做安卓app一、首先,我们先创建一个react项目作为演示。1.全局安装create-react-app#全局安装 npminstall-gcreate-react-app2.构建一

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

如何用react构建单页面

如何用react构建单页面react构建单页面需要使用react-router-dom库,所以我们需要先安装npminstallreact-router-dom-S下面以一个例子讲解,react构建单

如何下载使用react.js

如何下载使用react.js一、下载react.js、react-dom.js和babel.js在浏览器中输入这三个地址,将得到的页面全选后复制粘贴到本地的文件中,分别对应react.js、react

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

如何利用Reworld做一个一键吸空投箱的效果

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

react native有什么用?

reactnative有什么用?ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开

怎么用css美化网页

怎么用css美化网页1、我们先来看一下没有进过美化的html页面是什么样子吧。2、然后我们来看一下有美化效果的样子是什么样子,是不是漂亮一些。(相关课程推荐:css视频教程)3、准备好自己需要修饰的h

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为

js脚本怎么用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现

css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

怎么用js和css写一个幻灯片

怎么用js和css写一个幻灯片思路如下:1、创建一个div,用来包裹所有的图片,并设置定位方式为relative;2、所有的图片设置定位方式为absolute;距离顶部为0;3、并使用css属性tra

jq css怎么用?

jqcss怎么用?jquery中,css()方法用来返回或设置匹配的元素的一个或多个样式属性。语法:$(selector).css(name) $(selector).css(name,value)

dw怎么用css样式?

dw怎么用css样式?首先介绍一下CSS样式的属性:CSS样式属性被分为八大类:类型,背景,区块,方框,边框,列表,定位,扩展。类型主要定义文本的字体,大小,颜色,行高和修饰等。如图所示:方法一:内联

css文件怎么用?

css文件怎么用?css文件使用有两种方式,一种是通过link标签引入,一个是使用@import进行导入。1、通过link使用css文件将下面代码放在head标签中(相关课程推荐:css视频教程)2、

jquery on()怎么用?

jqueryon()怎么用?基本语法:$(selector).on(event,function) $(selector).on(object,[selector],[data]) $(selecto