react.js 表单验证-登录框

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 (
            

​
                
登   录
                

                    

                        账号
                        changeUsername.bind(this)}/>
                        {this.state.unameHelp}
                    
​
                    

                        密码
                        changePassword.bind(this)}/>
                        {this.state.upwdHelp}
                    
​
                    

                        
                            handleCheckbox.bind(this)} />
                            记住密码
                        
                    
​
                    

                        this.state.userName,this.state.userPassword)} className="btn btn-primary login-btn">登录
                    
                
​
            
        )
    }
}
​
​
    /**************登录(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%;
}