React sample code to implement login form

React sample code to implement login form

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:
  • How to determine whether the user is logged in and jump to the login page in react-navigation
  • react-native Complete sample code for implementing login function
  • React Native implements simple login function (recommended)
  • React uses routing to redirect to the login interface

<<:  Detailed explanation of binary and varbinary data types in MySQL

>>:  How to configure https for nginx in docker

Recommend

Example of how to embed H5 in WeChat applet webView

Preface WeChat Mini Programs provide new open cap...

Introduction to MySQL MHA operation status monitoring

Table of contents 1. Project Description 1.1 Back...

Implementation of mysql backup strategy (full backup + incremental backup)

Table of contents Design scenario Technical Point...

How to set up vscode remote connection to server docker container

Table of contents Pull the image Run the image (g...

Summary of MySql index, lock, and transaction knowledge points

This article summarizes the knowledge points of M...

How to use dynamic parameters and calculated properties in Vue

1. Dynamic parameters Starting from 2.6.0, you ca...

Example of how to reference environment variables in Docker Compose

In a project, you often need to use environment v...

Application of CSS3 animation effects in activity pages

background Before we know it, a busy year is comi...

Summary of Operator Operations That Are Very Error-Prone in JavaScript

Table of contents Arithmetic operators Abnormal s...

Two ways to export csv in win10 mysql

There are two ways to export csv in win10. The fi...

Detailed analysis of the parameter file my.cnf of MySQL in Ubuntu

Preface Based on my understanding of MySQL, I thi...

Example of how to deploy a Django project using Docker

It is also very simple to deploy Django projects ...

HTML input box optimization to improve user experience and ease of use

In order to improve user experience and ease of us...