脚本宝典收集整理的这篇文章主要介绍了React实现登录表单的示例代码,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
作为一个Vue用户,是时候扩展一下React了,从引入antd、配置less、router,终于实现了一个简单的登录表单。
代码如下:
import React From 'react'; import { Input, Button, message } from "antd"; import { UserOutlined, LockOutlined, EyeinvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; import './index.less' class Login extends React.component{ constructor(PRops) { suPEr(props) this.state = { username: '', password: '' } }; submIT=()=>{ if (this.state.username !== '' && this.state.password !== '') { this.props.history.push('/Index') } else { message.error("用户名和密码不能为空") } }; user_change=(e)=>{ this.setState({ username: e.target.value }) } password_change=(e)=>{ this.setState({ password: e.target.value }) } render () { const {username, password} = this.state return ( <div classname="LOGin"> <Input value={username} onChange={this.user_change} size="large" placeholder="用户名" prefix={<UserOutlined />} /> <Input.Password value={password} onChange={this.password_change} size="large" className="login__input" placeholder="密码" prefix={<LockOutlined />} iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} /> <Button className="login__BTn" size="large" type="Primary" onClick={this.submit} > 登录 </Button> </div> ); } } export default Login;
到此这篇关于React实现登录表单的示例代码的文章就介绍到这了,更多相关React 登录表单内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的React实现登录表单的示例代码全部内容,希望文章能够帮你解决React实现登录表单的示例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。