As a Vue user, it's time to expand React. From introducing antd, configuring less and router, I finally implemented a simple login form. The code is as follows: 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("Username and password cannot be empty") } }; 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="username" prefix={<UserOutlined />} /> <Input.Password value={password} onChange={this.password_change} size="large" className="login__input" placeholder="password" prefix={<LockOutlined />} iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} /> <Button className="login__btn" size="large" type="primary" onClick={this.submit} > Login</Button> </div> ); } } export default Login; This is the end of this article about the sample code for implementing a login form with React. For more relevant React login form content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of binary and varbinary data types in MySQL
>>: How to configure https for nginx in docker
Preface WeChat Mini Programs provide new open cap...
Table of contents 1. Project Description 1.1 Back...
Table of contents Design scenario Technical Point...
Table of contents Pull the image Run the image (g...
This article summarizes the knowledge points of M...
1. Dynamic parameters Starting from 2.6.0, you ca...
In a project, you often need to use environment v...
Nginx is a high-performance website server and re...
background Before we know it, a busy year is comi...
Table of contents Arithmetic operators Abnormal s...
There are two ways to export csv in win10. The fi...
Preface Based on my understanding of MySQL, I thi...
1. Disconnection reason There are many reasons wh...
It is also very simple to deploy Django projects ...
In order to improve user experience and ease of us...