react--todolist

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 >
    )
  }
}