import React, { Component } from 'react'
export default class List extends Component {
constructor() {
super();
this.state = {
username: "",//用户名
userage: "",//年龄
editusername: "",//修改用户名
edituserage: "",//修改年龄
editId: "",//修改的id
flag: false,//弹出框的状态
list: [
{ id: 1, username: "leilei", userage: 18 },
{ id: 2, username: "yuyu", userage: 19 },
{ id: 3, username: "aoao", userage: 20 },
]
}
}
delUser = (id) => {//删除
this.setState({
list: this.state.list.filter(item => item.id !== id)
})
}
addUser = () => {//新增
let id = 1;//新增的时候加上id
//如果list有长度,就取最大的
if (this.state.list.length) {
id = this.state.list.map((item) => item.id).sort((a, b) => b - a)[0] + 1
}
//判断用户名是否重复
if (this.state.list.some((item) => item.username === this.state.username)) {
console.log(this.state.username + "已存在");
return false
}
this.setState({
list: [...this.state.list, { id, username: this.state.username, userage: this.state.userage }]
})
}
editUser = (item) => {//修改按钮,点开出现dialog
this.setState({
flag: true,
editusername: item.username,
edituserage: item.userage,
editId: item.id,
})
}
updateUser = () => {//更新
this.setState({
list: this.state.list.map(item => {
if (item.id === this.state.editId) {
item.username = this.state.editusername;
item.userage = this.state.edituserage
}
return item
}),
flag: false
})
console.log(this.state.editusername);
}
cancel = () => {//取消(清空输入框的字段)
this.setState({
editUsername: "",
editUserage: "",
flag: false
})
}
render() {
return (
<div>
<h3>用户列表</h3>
<div>
<div>用户名<input value={this.state.username} onChange={(e) => {
this.setState({
username: e.target.value
})
}}></input></div>
<div>年龄<input value={this.state.userage} onChange={(e) => {
this.setState({
userage: e.target.value
})
}}></input></div>
<div><button onClick={() => {
this.addUser()
}}>新增</button></div>
</div>
<div className='table'>
<div className='tr'>
<div className='td'>编号</div>
<div className='td'>姓名</div>
<div className='td'>年龄</div>
<div className='td'>操作</div>
</div>
{this.state.list.map((item, index) => {
return <div className='tr' key={(index)}>
<div className='td'>{item.id}</div>
<div className='td'>{item.username}</div>
<div className='td'>{item.userage}</div>
<div className='td' >
<span onClick={() => {
this.editUser(item)
}}>修改</span>
<span onClick={() => {
this.delUser(item.id)
}}>删除</span>
</div>
</div>
})}
</div>
<div className='dialog' style={{ display: this.state.flag ? "block" : "none" }}>
<h3>修改姓名和年龄</h3>
<div>
<div>用户名<input value={this.state.editusername} onChange={(e) => {
this.setState({
editusername: e.target.value
})
}}></input></div>
<div>年龄<input value={this.state.edituserage} onChange={(e) => {
this.setState({
edituserage: e.target.value
})
}}></input></div>
<div>
<button onClick={() => {
this.updateUser()
}}>更新</button>
<button onClick={() => {
this.cancel()
}}>取消</button>
</div>
</div>
</div>
</div >
)
}
}