react实现登录页面demo

//ͷ头部
class Header extends React.Component {
goBack (){
    window.history.go(-1);
}
    render() {
         var styleDiv = {
            width:'100%',
            height:'70px',
           lineHeight:'70px'
        }
        var styleImg = {
           marginLeft:'10px',
           marginRight:'10px'
        }

        return (
            

                this.goBack()} >
                    
                
            
        )
    }
}
 //中间表单
class Content extends React.Component{

    constructor(props){
        super(props);
        this.state = {
        telError:null,
        passwordError:null,
        imageShow:true
        }

    }
    //手机号判断
    telCheck(event){
        this.tel=event.target.value
        console.log(this.tel)
        var reg=/^1[34578]\d{9}$/;
        if(reg.test(this.tel)==false){
            this.setState({
               telError:"请输入正确的手机号"
            })
        }else{
            this.setState({
                telError:""
            })
        }

    }
    //密码判断
    passwordCheck(event){
        this.password=event.target.value
        var reg=/^\w{6,20}$/;
        if(reg.test(this.password)==false){
            this.setState({
                passwordError:"密码为6-20位数字或字母或下划线!"
            })
        }else{
            this.setState({
                passwordError:""
            })
            }

    }
    //是否记住密码
    isRemember(){
        this.setState({
            imageShow:!this.state.imageShow
        })
    }
render () {
    var imageSrc=this.state.imageShow?"./images/unSelected.png":"./images/selected.png"
    var headImg={
        marginTop:"42px",
        marginBottom:"44px",
        position:'relative',
        left:"50%",
        marginLeft:"-56px"
        //textAlign:"center"不识别
    }
    var ul={
        listStyle:"none",
        margin:"0",
        padding:"0",
        display:"block",
        paddingLeft:"50px",
        paddingRight:"50px"
    }
    var liAll={
        margin:"0 auto",
        padding:"0"


    }
    var userTel={
        margin:"0 auto",
        padding:"0",
        display:'block',
        height:"41px",
        width:"286px",
        borderBottom:"1px solid #989898",
        lineHeight:"52px",
        paddingTop:"11px"
    }
    var userImg={
        diaplay:"inline-block",
        width:"30px",
        marginRight:"6px"
    }
    var userSpan={
        display:"inline-block",
        border:"1px solid #989898",
        height:"20px"
    }
    var telInput={
        margin:"0",
        padding:"0",
        display:"inline-block",
        height:"20px",
        marginBottom:"12px",
        marginLeft:"12px",
        outLine:"none",
        border:"0"
    }
    var telPrompt={
        color:"red",
        fontSize:"18px"
    }
    var unSelected={
        display:"inline-block",
        width:"20px",
        marginTop:"14px",
        marginRight:"4px"
    }
    var rememberLi={
        display:"block",
        height:"48px",
        lineHeight:"48px",
        clear:"both",
        margin:"0 auto"
    }
    var rememberI={
        fontStyle:"normal",
        fontSize:"11px",
        color:"#3dbf8e",
        marginLeft:"4px"

    }
    var forgetI={
        float:"right",
        fontStyle:"normal",
        fontSize:"11px",
        color:"#3dbf8e",
        marginBottom:"23px"

    }
    var login={
        border:"none",
        width:"100%",
        height:"42px",
        backgroundColor:"#F55D5D",
        color:"#fff",
        fontSize:"18px"
    }
    return (
        

            
            

                

                    
                    
                    this.telCheck(event)} />
                
                

                    {this.state.telError}
                
                

                    
                    
                    this.passwordCheck(event)}/>
                

                    {this.state.passwordError}
                
                

                    this.isRemember()}/>
                    记住手机号忘记密码
                
                

                    登录
                
            
        
    )
}
 }
 //底部
class Footer extends React.Component{
render(){
    var register={
        display:"block",
        fontSize:"13px",
        color:"#8b8b8b",
        width:"80px",
        height:"25px",
        margin:"0 auto",
        border:"1px solid #8b8b8b",
        textDecoration:"none",
        marginTop:"50px",
        textAlign:"center",
        lineHeight:"25px"

    }
    return(
    快速注册
    )
}
}
class All extends React.Component{
  render () {
      return (
          

              

              
              

          
      )
  }
}

 ReactDOM.render(
     ,document.getElementById("container")
 )

html