怎么用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