import React, { Component } from 'react'

class StudentList extends Component { state = { list: [ { "id": 1, "tal": "123123121", "name": "超越", "icon": "https://img95.699pic.com/element/40144/6175.png_860.png" }, { "id": 2, "tal": "123123121", "name": "佳航", "icon": "https://img95.699pic.com/element/40144/6175.png_860.png" }, { "id": 3, "tal": "123123121", "name": "张伟", "icon": "https://img95.699pic.com/element/40144/6175.png_860.png" }, { "id": 4, "tal": "123123121", "name": "成果", "icon": "https://img95.699pic.com/element/40144/6175.png_860.png" }, { "id": 5, "tal": "123123121", "name": "狗哥", "icon": "https://img95.699pic.com/element/40144/6175.png_860.png" }, ] }

// 添加学生 addStudent = () => { const { list } = this.state // 获取输入框的值 const id = document.getElementById('addId').value const tal = document.getElementById('addTal').value const name = document.getElementById('addName').value const icon = "https://img95.699pic.com/element/40144/6175.png_860.png" // 如果输入框有值，则添加学生 if (id && tal && name) { // 新增学生 list.push({ id: Number(id), tal, name, icon }) // 清空输入框 document.getElementById('addId').value = '' document.getElementById('addTal').value = '' document.getElementById('addName').value = '' // 更新状态 this.setState({ list }) } }

// 删除学生 deleteStudent = (index) => { const { list } = this.state // 删除指定下标的学生 list.splice(index, 1) // 更新状态 this.setState({ list }) }

// 根据学号排序 sortByStudentId = () => { const { list } = this.state // 按照学号升序排序 list.sort((a, b) => a.id - b.id) // 更新状态 this.setState({ list }) }

render() { const { list } = this.state return ( <>

学生列表

{ list.map((item, index) => ( )) }

学号	电话	姓名	头像	操作
{item.id}	{item.tal}	{item.name}		<button onClick={() => { this.deleteStudent(index) }}>删除

export default StudentList