React實(shí)現(xiàn)登錄表單的示例代碼
更新時(shí)間：2021年04月06日 10:47:59 作者：喬路非
這篇文章主要介紹了React實(shí)現(xiàn)登錄表單的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
作為一個(gè)Vue用戶，是時(shí)候擴(kuò)展一下React了，從引入antd、配置less、router，終于實(shí)現(xiàn)了一個(gè)簡單的登錄表單。
代碼如下：
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實(shí)現(xiàn)登錄表單的示例代碼的文章就介紹到這了,更多相關(guān)React 登錄表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React在定時(shí)器中無法獲取狀態(tài)最新值的問題
這篇文章主要介紹了React在定時(shí)器中無法獲取狀態(tài)最新值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解React中setState回調(diào)函數(shù)
這篇文章主要介紹了詳解React中setState回調(diào)函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本文主要介紹了React組件二次包裝的具體實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
如何在 React 中調(diào)用多個(gè) onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個(gè)onClick函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了React 使用Effect Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
對于剛學(xué)前端的大家來說,對于React中的事件監(jiān)聽寫法有所疑問很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關(guān)于React中何時(shí)使用箭頭函數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
React中的useState和setState的執(zhí)行機(jī)制詳解
這篇文章主要介紹了React中的useState和setState的執(zhí)行機(jī)制,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能，并且對功能和樣式的要求較為簡單的場景，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
本篇文章主要介紹了React組件生命周期，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-10-10
在React中,編寫樣式主要有以下幾種方式,內(nèi)聯(lián)樣式,外部樣式表,CSS Modules,Styled Components,Emotion和Radium這六種樣式,下面我將針對上面提到的6種方式給出詳細(xì)的代碼示例,需要的朋友可以參考下2024-01-01