您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关使用React怎么实现一个登录表单,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
代码如下:
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怎么实现一个登录表单就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。