react 登录表单记住账号和密码

import { useEffect, useState } from "react";
import { Button, Checkbox, Form, Input } from "antd";
import { useNavigate } from "react-router-dom";
import { Login } from "@/api/interface";
import { loginApi } from "@/api/modules/login";
import { HOME_URL } from "@/config/config";
import { connect } from "react-redux";
import { setToken } from "@/redux/modules/global/action";
import { setUserInfo } from "@/redux/modules/auth/action";
import { useTranslation } from "react-i18next";
import { setTabsList } from "@/redux/modules/tabs/action";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
type FieldType = {
	remember?: string;
};
interface LoginFormProps {
	account: string;
	password: string;
	setToken: (token: string) => void;
	setUserInfo: (userInfo: any) => void;
}
const LoginForm: React.FC<LoginFormProps> = (props: any) => {
	const { t } = useTranslation();
	const { account, password, setToken, setTabsList, setUserInfo } = props;
	const navigate = useNavigate();
	const [form] = Form.useForm();
	const [loading, setLoading] = useState<boolean>(false);
	const [remember, setRemeber] = useState<boolean>(props.remember);

	// 登录
	const onFinish = async (loginForm: Login.ReqLoginForm) => {
		try {
			setLoading(true);
			const { data } = await loginApi(loginForm);
			setToken(data?.token);
			setUserInfo({ ...data, remember: remember });
			setTabsList([]);
			navigate(HOME_URL);
		} finally {
			setLoading(false);
		}
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log("Failed:", errorInfo);
	};
	useEffect(() => {
		console.log("remember", remember);
		remember && form.setFieldsValue({ account, password, remember });
	}, [account, password, form]);
	return (
		<Form
			form={form}
			name="basic"
			labelCol={{ span: 5 }}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			size="large"
			autoComplete="off"
		>
			<Form.Item name="account" rules={[{ required: true, message: "请输入用户名" }]}>
				<Input placeholder="用户名：" prefix={<UserOutlined />} />
			</Form.Item>
			<Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
				<Input.Password autoComplete="new-password" placeholder="密码：" prefix={<LockOutlined />} />
			</Form.Item>
			<Form.Item<FieldType> name="remember" valuePropName="checked">
				<Checkbox
					onChange={() => {
						setRemeber(!remember);
					}}
				>
					Remember me
				</Checkbox>
			</Form.Item>
			<Form.Item className="login-btn">
				<Button
					onClick={() => {
						form.resetFields();
					}}
					className="r-10"
				>
					{t("")}
				</Button>
				<Button type="primary" htmlType="submit" loading={loading}>
					{t("login.confirm")}
				</Button>
			</Form.Item>
		</Form>
	);
};
const mapStateToProps = (state: any) => {
	return {
		account: state.auth.userInfo.account, // 从 Redux store 获取账号
		password: state.auth.userInfo.password, // 从 Redux store 获取密码
		remember: state.auth.userInfo.remember
	};
};
const mapDispatchToProps = { setToken, setTabsList, setUserInfo };
// 连接react组件和redux
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);