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

CSS3 achieves cool sliced ​​image carousel effect

Today we will learn how to use CSS to create a co...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

Introduction to Docker Architecture

Docker includes three basic concepts: Image: A Do...

Detailed explanation of MYSQL large-scale write problem optimization

Abstract: When people talk about MySQL performanc...

The table merges cells and the img image to fill the entire td HTML

Source code (some classes deleted): Copy code The ...

How to implement the @person function through Vue

This article uses vue, and adds mouse click event...

Example analysis of interval calculation of mysql date and time

This article uses an example to describe the inte...

MySQL data insertion optimization method concurrent_insert

When a thread executes a DELAYED statement for a ...

jQuery implements a simple carousel effect

Hello everyone, today I will share with you the i...

Examples of 4 methods for inserting large amounts of data in MySQL

Preface This article mainly introduces 4 methods ...

A useful mobile scrolling plugin BetterScroll

Table of contents Make scrolling smoother BetterS...

Summary of Docker common commands and tips

Installation Script Ubuntu / CentOS There seems t...

How to develop uniapp using vscode

Because I have always used vscode to develop fron...

JavaScript data structure bidirectional linked list

A singly linked list can only be traversed from t...