public/index.html

p<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="stylesheet" href="%PUBLIC_URL%/base.css">
    <link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

App.js

import React, {
  Component
} from 'react'

import StudentTitle from './Components/StudentTitle'
import AddStudents from './Components/AddStudents'
import StudentList from './Components/StudentList'

class App extends Component {

  // 定义状态，用于管理信息
  state = {
    studentList: [
      {
        number: '1',
        name: 'Links',
        age: '22',
        sex: '男',
        college: '大前端',
        hobbies: ['篮球']
      },
      {
        number: '2',
        name: 'ReoNa',
        age: '22',
        sex: '女',
        college: 'python',
        hobbies: ['网球']
      },
      {
        number: '3',
        name: 'Aimyon',
        age: '25',
        sex: '女',
        college: 'Java',
        hobbies: ['网球']
      }
    ]
  }

  // 定义一个方法用于处理 studentList 状态
  addList = (student, cb) => {
    this.setState({
      studentList: [ ...this.state.studentList, student ]
    }, () => {
      cb()
    })
  }

  // 定义一个删除方法
  removeStudent = (number) => {
    // 核心：1. 利用 number 找到 studentList 需要被删除的项
    //       2. 将该项从原数据中删除
    //       3. 最后将处理的数据 setState ，从而渲染页面

    // 1. 深拷贝原数据
    const studentList = JSON.parse(JSON.stringify(this.state.studentList))
    // 2. 找到 number 对应项
    const index = studentList.findIndex(student => student.number === number)
    // 3. 利用 index 删除
    studentList.splice(index, 1)
    // 4. 数据更新
    this.setState({
      studentList
    }, () => {
      console.log(this.state.studentList)
    })
  }

  render() {
    return (
      <div className="container">
        <StudentTitle />
        <AddStudents addList={ this.addList } />
        <StudentList
          studentList={ this.state.studentList }
          removeStudent={ this.removeStudent }
        />
      </div>
    )
  }
}

export default App

src/Components/StudentTitle.js

import React, { Component } from 'react'

class StudentTitle extends Component {
  render () {
    return (
      <div className="col-md-12">
        <h3 className="title">学生信息管理</h3>
      </div>
    )
  }
}

export default StudentTitle

src/Components/AddStudents.js

 import React, { Component } from 'react'
 
 class AddStudents extends Component {
 
   constructor(props) {
     super()
     this.handler = this.handler.bind(this)
   }
 
   // 1. 定义组件中的状态
   state = {
     number: '',
     name: '',
     sex: '女',
     age: '',
     college: '大前端',
     hobbies: [
       {
         id: 1,
         title: '篮球',
         isChecked: false
       },
       {
         id: 2,
         title: '足球',
         isChecked: false
       },
       {
         id: 3,
         title: '网球',
         isChecked: false
       }
     ]
   }
   // 浅拷贝，对象会有问题
   // origin = { ...this.state }
   // 深拷贝
   origin = JSON.parse(JSON.stringify(this.state))
 
   // 2. 设置更新的控制
   handler = (e) => {
     // 获取当前输入的值，然后调用 setState 更新在具体属性上
     const value = e.target.value
     const prop = e.target.name
     this.setState({
       [prop]: value
     })
   }
 
   // hobbyHandler
   hobbyHandler = (e, index) => {
     const isChecked = e.target.checked
     const hobbies = [...this.state.hobbies]
     hobbies[index].isChecked = isChecked
     this.setState({
       hobbies
     })
   }
 
   // 提交添加
   submit = (e) => {
     e.preventDefault()
     // 提交时需要将表单的有用信息整合
     // 1. 筛选当前选中的爱好
     const hobbies = this.state.hobbies
       .filter(item => item.isChecked)
       .map(item => item.title)
     // 2. 将上述处理好的数据和其他数据整合
     const formVal = {
       ...this.state, hobbies
     }
     // 3. 将当前数据利用回调方式，上传给上层组件
     this.props.addList(formVal, () => {
       // 4. 提交完成后，重置表单
       this.setState(this.origin)
     })
   }
 
   render() {
     return (
       <div className="col-md-5">
         <form onSubmit={ this.submit }>
           <div className="form-group">
             <label>学号</label>
             <input
               name="number"
               value={this.state.number}
               onChange={this.handler}
               type="number"
               className="form-control"
               placeholder="请输入学号" />
           </div>
           <div className="form-group">
             <label>姓名</label>
             <input
               name="name"
               value={this.state.name}
               onChange={this.handler}
               type="text"
               className="form-control"
               placeholder="请输入姓名"
             />
           </div>
           <div className="form-group">
             <label>性别&nbsp;&nbsp;</label>
             <label className="checkbox-inline">
               <input
                 name="sex"
                 checked={this.state.sex === '男'}
                 onChange={this.handler}
                 type="radio" value="男" /> 男
           </label>
             <label className="checkbox-inline">
               <input
                 name="sex"
                 checked={this.state.sex === '女'}
                 onChange={this.handler}
                 type="radio"
                 value="女" /> 女
           </label>
           </div>
           <div className="form-group">
             <label>年龄</label>
             <input
               name="age"
               value={this.state.age}
               onChange={this.handler}
               type="text"
               className="form-control"
               placeholder="请输入年龄"
             />
           </div>
           <div className="form-group">
             <label>爱好</label>
             {
               this.state.hobbies.map((item, index) => {
                 return (
                   <div
                     className="checkbox"
                     key={ item.id }
                   >
                     <label>
                       <input
                         type="checkbox"
                         value={ item.title }
                         checked={ item.isChecked }
                         onChange={ (e) => { this.hobbyHandler(e, index) } }
                       />
                       { item.title }
                     </label>
                   </div>
                 )
               })
             }
 
           </div>
           <div className="form-group">
             <label>所属学院</label>
             <select
               name="college"
               value={this.state.college}
               onChange={this.handler}
               className="form-control"
             >
               <option value="大前端">大前端</option>
               <option value="Java">Java</option>
               <option value="python">python</option>
             </select>
           </div>
           <button type="submit" className="btn btn-default">添加</button>
         </form>
       </div>
     )
   }
 }
 
 export default AddStudents

src/Components/StudentList.js

import React, { Component } from 'react'
 
 class StudentList extends Component {
   rmStudent = (e, number) => {
     e.preventDefault()
     if (window.confirm('是否确定删除当前项')) {
       this.props.removeStudent(number)
     }
   }
 
 
   render() {
     const { studentList } = this.props
     // 存放年纪和
     let totalAge = 0
     // 平均年龄
     let avgAge = 0
     studentList.forEach(student => totalAge += Number(student.age))
     avgAge = Math.floor(totalAge / studentList.length )
     return (
       <div className="col-md-6 col-md-offset-1">
         <table className="table table-striped table-hover">
           <thead>
             <tr>
               <th>学号</th>
               <th>姓名</th>
               <th>性别</th>
               <th>年龄</th>
               <th>入学时间</th>
               <th>爱好</th>
               <th>所属学院</th>
               <th>操作</th>
             </tr>
           </thead>
           <tbody>
             {
               studentList.map(student => {
                 return (
                   <tr key={ student.number }>
                     <td>{ student.number }</td>
                     <td>{ student.name }</td>
                     <td>{ student.sex }</td>
                     <td>{ student.age }</td>
                     <td>2020-08-02</td>
                     <td>
                       { student.hobbies.map((hobby, index) => (<span key={ index }>{ hobby }</span>)) }
                     </td>
                     <td>{ student.college }</td>
                     <td>
                       <span
                         onClick={ (e) => this.rmStudent(e, student.number) }
                       >删除</span>
                     </td>
                   </tr>
                 )
               })
             }
           </tbody>
         </table>
         { studentList.length === 0 ?
           <p className="text-center">无学生信息</p> :
           '' }
         <p>总共有 { studentList.length } 个学生</p>
         <p>学生的平均年龄是 { avgAge }</p>
       </div>
     )
   }
 }
 
 export default StudentList

3-react-学生管理系统拆分

public/index.html

App.js

src/Components/StudentTitle.js

src/Components/AddStudents.js

src/Components/StudentList.js