作为一个Vue用户，是时候扩展一下React了，从引入antd、配置less、router，终于实现了一个简单的登录表单。
代码如下：
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;
到此这篇关于React实现登录表单的示例代码的文章就介绍到这了,更多相关React 登录表单内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/qq_40731976/article/details/109327931
查看更多关于React实现登录表单的示例代码的详细内容...