作為一個Vue用戶，是時候擴(kuò)展一下React了，從引入antd、配置less、router，終于實現(xiàn)了一個簡單的登錄表單。
代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
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; |
到此這篇關(guān)于React實現(xiàn)登錄表單的示例代碼的文章就介紹到這了,更多相關(guān)React 登錄表單內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_40731976/article/details/109327931
