下午 3个小时 有点笨啊
不包含注册时的判断
有瑕疵 回头再修改吧
import * as React from 'react';
import {Card, Select, Button, Checkbox, Input, Dialog} from '@alifd/next';
import {useEffect, useState} from "react";
export default function MergeCellTable(props) {
const [userInformation, setUserInformation] = useState({userName: '', passWord: '', flag: false})
useEffect(() => {
}, []);
// 设置dialog弹出框
const [dialogValue,setDialogValue] = useState(false);
// 从本地存储中取出数据
const jsonData = JSON.parse(window.localStorage.getItem('userArr'));
// 数组初始赋值 如果有数据就赋值
let userArr = jsonData ? jsonData : false;
const userNameData = userArr ? userArr.map((item, i) => {
console.log(item.userName);
console.log(i);
const name = item.userName;
console.log(name)
return {value: name, index: i};
}) : [{}]
// 选择事件进行判断是选择还是输入进行不同操作
const onChange = (value, actionType, item, index) => {
if (actionType === 'itemClick') {
setUserInformation({userName: item.value, passWord: userArr[item.index].passWord, flag: true})
} else {
setUserInformation({...userInformation, userName: value})
}
if (item==='clear'){
setDialogValue(true);
}
};
// 存储账号密码
const getPassWord = () => {
// 判断是否重复
if (JSON.stringify(userArr).indexOf(JSON.stringify(userInformation)) == -1) {
userArr.push(userInformation);
window.localStorage.setItem('userArr', JSON.stringify(userArr));
}
}
return (
<Card free>
<div >
<span>账号:</span>
<Select.AutoComplete
value={userInformation.userName}
placeholder='请输入账号'
onChange={onChange}
dataSource={userNameData}
hasClear
style={{width:'200px'}}
/>
</div>
<div style={{marginTop:'10px'}}>
<span>密码:</span>
<Input.Password
// type='password'
style={{width:'200px'}}
value={userInformation.passWord}
placeholder='请输入密码'
onChange={(value) => {
setUserInformation({...userInformation, passWord: value})
}}/></div>
<div>
<Checkbox
checked={userInformation.flag}
onChange={(value) => {
setUserInformation({...userInformation, flag: value})
}}>
记住密码
</Checkbox>
</div>
<div>
<Button
onClick={() => {
if (userInformation.flag) {
getPassWord();
}
}}
>登录</Button>
</div>
<div>
<Dialog
visible={dialogValue}
title={'是否删除该账号登录信息'}
style={{width:'200px'}}
onClose={()=>{
setDialogValue(false);
}}
onCancel={()=>{
setDialogValue(false);
}}
onOk={()=>{
setDialogValue(false);
}}
>
</Dialog>
</div>
</Card>
);
}