菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
57
0

怎么用react写登陆框

原创
05/13 14:22
阅读数 724


怎么用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%;
}

发表评论

0/200
57 点赞
0 评论
收藏
为你推荐 换一批