#秋日生活打卡季#

最近一直在使用react18 hooks开发一款即时聊天项目。今天分享下登录/注册表单验证模块。

项目组件库使用的是字节跳动出品的react版本组件库@arco-design/web-react。

// npmnpm i @arco-design/web-react// yarnyarn add @arco-design/web-react

return (	<div className="rc__authwrap flexbox flex-alignc flex-justifyc flex-col">		<Card style={{'width': '480px'}}>			<div className="rc__authwrap-header flex1">				<div className="rc__authwrap-slogan">					<img src="/react.svg" width="80" />					<p>react-webchat</p>				</div>				<div className="rc__authwrap-forms">					<div className="item flexbox">						<Input value={params.name} allowClear onChange={value => setParams({...params, name: value})} placeholder="请输入账号" />					</div>					<div className="item flexbox">						<Input.Password value={params.pwd} allowClear onChange={value => setParams({...params, pwd: value})} placeholder="请输入密码" onPressEnter={handleKeyDown} />					</div>					<div className="item pt-10">						<Button type="primary" size="large" long onClick={handleLogin}>登录</Button>					</div>					<div className="item lgreg-lk">						<NavLink className="navigator" to="#">忘记密码</NavLink>						<NavLink className="navigator" to="/register">注册账号</NavLink>					</div>				</div>			</div>			<div className="rc__authwrap-footer">				<p className="version">REACT-CHAT v1.0</p>			</div>		</Card>	</div>)

const [params, setParams] = useState({	name: '',	pwd: ''})const authState = authStore()const navigate = useNavigate()const snackbar = (content) => {	rdialog.msg(content, {anim: 'fadeInUp', opacity: .2, position: '10px', time: 2, customStyle: {'padding': '15px'}})}const handleLogin = () => {	const { name, pwd } = params	if(!name || !pwd) {		snackbar('表单验证错误')	}else {		// ...请求后端接口				rdialog({			type: 'toast',			icon: 'success',			content: '登录成功',			time: 2,			onClose: () => {				authState.loggedData({					isLogged: true,					token: uuid()				})				navigate('/', {replace: true})			}		})	}}

项目中使用到的弹窗功能则是自己研发的react18 hooks弹窗组件rdialog。

react18 hooks通用pc端对话框组件Rdialog

该项目还在完善中，后续也会分享出来。