组件拆分

  • src/App.js ```jsx import React, { Component } from “react”; import StudentTitle from “./Components/StudentTitle”; import AddStudent from “./Components/AddStudent”; import StudentList from “./Components/StudentList”;

class App extends Component { render() { return (

); } }

export default App;

  2. - src/Components/StudentsTitle.js
  3. ```jsx
  4. import React, { Component } from "react";
  6. class AddStudent extends Component {
  7.   render() {
  8.     return (
  9.       <div className="col-md-12">
  10.         <h3 className="title">学生信息管理</h3>
  11.       </div>
  12.     );
  13.   }
  14. }
  16. export default AddStudent;
  • src/Components/AddStudent.js ```jsx import React, { Component } from “react”;

class StudentTitle extends Component { render() { return (

); } }

export default StudentTitle;

  2. - src/Components/StudentList.js
  3. ```jsx
  4. import React, { Component } from "react";
  6. class StudentList extends Component {
  7.   render() {
  8.     return (
  9.       <div className="col-md-6 col-md-offset-1">
  10.         <table className="table table-striped table-hover">
  11.           <thead>
  12.             <tr>
  13.               <th>学号</th>
  14.               <th>姓名</th>
  15.               <th>性别</th>
  16.               <th>年龄</th>
  17.               <th>入学时间</th>
  18.               <th>爱好</th>
  19.               <th>所属学院</th>
  20.               <th>操作</th>
  21.             </tr>
  22.           </thead>
  23.           <tbody>
  24.             <tr>
  25.               <td>01</td>
  26.               <td>张三</td>
  27.               <td>男</td>
  28.               <td>20</td>
  29.               <td>2020-08-02</td>
  30.               <td>
  31.                 <span>足球</span>
  32.               </td>
  33.               <td>python</td>
  34.               <td>
  35.                 <a>删除</a>
  36.                 <a>修改</a>
  37.               </td>
  38.             </tr>
  39.           </tbody>
  40.         </table>
  41.         <p className="text-center">无学生信息</p>
  42.         <p>总共有 50 个学生</p>
  43.         <p>学生的平均年龄是 25</p>
  44.       </div>
  45.     );
  46.   }
  47. }
  49. export default StudentList;

添加学生信息

数据绑定需更新

  • AddStudents.js ```jsx import React, { Component } from “react”;

class AddStudent extends Component { constructor() { super(); this.stateHandler = this.stateHandler.bind(this); this.hobbyHandler = this.hobbyHandler.bind(this) }

//01 定义组件中的状态 state = { number: “”, name: “”, sex: “男”, age: “”, collage: “大前端”, hobbies: [ { id: 1, title: “篮球”, isChecked: false, }, { id: 2, title: “足球”, isChecked: false, }, { id: 3, title: “网球”, isChecked: false, }, ], }; stateHandler(ev) { // 获取当前输入的值，调用 setState 更新具体的属性 const prop = ev.target.name; this.setState( {

  1.     [prop]: ev.target.value,
  2.   },
  3.   () => {
  4.     console.log(this.state);
  5.   }
  6. );

} hobbyHandler(index,ev){ // 当前操作需要提前获取被操作选项的索引,事件对象 const isChecked = ev.target.checked const hobbies = […this.state.hobbies] hobbies[index].isChecked = isChecked

  1. this.setState({
  2.   hobbies
  3. }, () => {console.log(this.state)})

} render() { return (

{this.state.hobbies.map((hobby,index) => { return (
); })}
); } }

export default AddStudent;

  1. <a name="ob1hD"></a>
  2. ### 提交学生信息
  4. - AddStudent.js
  5. ```jsx
  6. import React, { Component } from "react";
  8. class AddStudent extends Component {
  9.   constructor() {
  10.     super();
  11.     this.stateHandler = this.stateHandler.bind(this);
  12.     this.hobbyHandler = this.hobbyHandler.bind(this)
  13.   }
  15.   //01 定义组件中的状态
  16.   state = {
  17.     number: "",
  18.     name: "",
  19.     sex: "男",
  20.     age: "",
  21.     collage: "大前端",
  22.     hobbies: [
  23.       {
  24.         id: 1,
  25.         title: "篮球",
  26.         isChecked: false,
  27.       },
  28.       {
  29.         id: 2,
  30.         title: "足球",
  31.         isChecked: false,
  32.       },
  33.       {
  34.         id: 3,
  35.         title: "网球",
  36.         isChecked: false,
  37.       },
  38.     ],
  39.   };
  40.   // 深拷贝一份状态 用于重置
  41.   origin = JSON.parse(JSON.stringify(this.state))
  43.   stateHandler(ev) {
  44.     // 获取当前输入的值，调用 setState 更新具体的属性
  45.     const prop = ev.target.name;
  46.     this.setState(
  47.       {
  48.         [prop]: ev.target.value,
  49.       },
  50.       () => {
  51.         console.log(this.state);
  52.       }
  53.     );
  54.   }
  55.   hobbyHandler(index,ev){
  56.     // 当前操作需要提前获取被操作选项的索引,事件对象
  57.     const isChecked = ev.target.checked
  58.     const hobbies = [...this.state.hobbies]
  59.     hobbies[index].isChecked = isChecked
  61.     this.setState({
  62.       hobbies
  63.     }, () => {console.log(this.state)})
  64.   }
  66.   submit = (ev) => {
  67.     ev.preventDefault()
  68.     console.log(this.state)
  69.     //提交时需要将表单里的有用信息整合在一起
  71.     // 筛选出我们当前次选中的爱好
  72.     const hobbies = this.state.hobbies
  73.       .filter(hobby => hobby.isChecked)
  74.       .map(hobby => hobby.title)
  76.     // 数据组合
  77.     const fromValue = {
  78.       ...this.state,
  79.       hobbies
  80.     }
  81.     console.log(fromValue)
  83.     // 将当前数据利用回调传回给上层组件
  84.     this.props.addStudent(fromValue, () => {
  85.       // 重置
  86.       this.setState(this.origin)
  87.     })
  89.   }
  90.   render() {
  91.     return (
  92.       <div className="col-md-5">
  93.         <form onSubmit={this.submit}>
  94.           <div className="form-group">
  95.             <label>学号</label>
  96.             <input
  97.               value={this.state.number}
  98.               onChange={this.stateHandler}
  99.               name={"number"}
  100.               type="number"
  101.               className="form-control"
  102.               placeholder="请输入学号"
  103.             />
  104.           </div>
  105.           <div className="form-group">
  106.             <label>姓名</label>
  107.             <input
  108.               value={this.state.name}
  109.               onChange={this.stateHandler}
  110.               name={"name"}
  111.               type="text"
  112.               className="form-control"
  113.               placeholder="请输入姓名"
  114.             />
  115.           </div>
  116.           <div className="form-group">
  117.             <label>性别&nbsp;&nbsp;</label>
  118.             <label className="checkbox-inline">
  119.               <input
  120.                 checked={this.state.sex === "男"}
  121.                 name="sex"
  122.                 onChange={this.stateHandler}
  123.                 type="radio"
  124.                 value="男"
  125.               /> 男
  126.             </label>
  127.             <label className="checkbox-inline">
  128.               <input
  129.                 checked={this.state.sex === "女"}
  130.                 name="sex"
  131.                 onChange={this.stateHandler}
  132.                 type="radio"
  133.                 value="女"
  134.               /> 女
  135.             </label>
  136.           </div>
  137.           <div className="form-group">
  138.             <label>年龄</label>
  139.             <input
  140.               name={"age"}
  141.               value={this.state.age}
  142.               onChange={this.stateHandler}
  143.               type="text"
  144.               className="form-control"
  145.               placeholder="请输入姓名"
  146.             />
  147.           </div>
  148.           <div className="form-group">
  149.             <label>爱好</label>
  150.             {this.state.hobbies.map((hobby,index) => {
  151.               return (
  152.                 <div className="checkbox" key={hobby.id}>
  153.                   <label>
  154.                     <input
  155.                     checked={hobby.isChecked}
  156.                     type="checkbox"
  157.                     value={hobby.title}
  158.                     onChange={(ev) => {this.hobbyHandler(index, ev)}}
  159.                     /> {hobby.title}
  160.                   </label>
  161.                 </div>
  162.               );
  163.             })}
  164.           </div>
  165.           <div className="form-group">
  166.             <label>所属学院</label>
  167.             <select
  168.               name={"collage"}
  169.               onChange={this.stateHandler}
  170.               value={this.state.collage}
  171.               className="form-control"
  172.             >
  173.               <option value="大前端">大前端</option>
  174.               <option value="Java">Java</option>
  175.               <option value="python">python</option>
  176.             </select>
  177.           </div>
  178.           <button type="submit" className="btn btn-default">
  179.             添加
  180.           </button>
  181.         </form>
  182.       </div>
  183.     );
  184.   }
  185. }
  187. export default AddStudent;
  • App.js ```jsx import React, { Component } from “react”; import StudentTitle from “./Components/StudentTitle”; import AddStudent from “./Components/AddStudent”; import StudentList from “./Components/StudentList”;

class App extends Component { // 定义状态用于管理学员信息 state = { studentList: [] } // 处理 studentList 状态 addStudent = (student, callback) => { this.setState({ studentList: […this.state.studentList, student] // 合并更新 },() => { callback() console.log(this.state.studentList) }) } render() { return (

); } }

export default App;

  2. <a name="bGtGH"></a>
  3. ## 学生信息展示
  5. - App.js
  6. ```jsx
  7. <StudentList studentList={this.state.studentList} />
  • StudentList.js ```jsx import React, { Component } from “react”;

class StudentList extends Component { render() { // 解构出学生信息数据 const { studentList } = this.props; return (

{studentList.map((student) => { return ( ); })}
学号 姓名 性别 年龄 爱好 所属学院 操作
{student.number} {student.name} {student.sex} {student.age} { student.hobbies.map(hobby => { return ( {hobby} ) }) } {student.collage} 删除 修改

无学生信息

总共有 50 个学生

学生的平均年龄是 25

); } }

export default StudentList;

  2. <a name="dawer"></a>
  3. ## 学生信息删除
  5. - StudentList.js
  6. ```jsx
  7. import React, { Component } from "react";
  9. class StudentList extends Component {
  10.   // 删除
  11.   rmStudent = (index, ev) => {
  12.     ev.preventDefault()
  13.     if(window.confirm('是否确定删除当前项')){
  14.       this.props.removeStudent(index)
  15.     }
  17.   }
  18.   render() {
  19.     // 解构出学生信息数据
  20.     const { studentList } = this.props;
  21.     return (
  22.       <div className="col-md-6 col-md-offset-1">
  23.         <table className="table table-striped table-hover">
  24.           <thead>
  25.             <tr>
  26.               <th>学号</th>
  27.               <th>姓名</th>
  28.               <th>性别</th>
  29.               <th>年龄</th>
  30.               <th>爱好</th>
  31.               <th>所属学院</th>
  32.               <th>操作</th>
  33.             </tr>
  34.           </thead>
  35.           <tbody>
  36.             {studentList.map((student) => {
  37.               return (
  38.                 <tr key={student.number}>
  39.                   <td>{student.number}</td>
  40.                   <td>{student.name}</td>
  41.                   <td>{student.sex}</td>
  42.                   <td>{student.age}</td>
  43.                   <td>
  44.                     {
  45.                       student.hobbies.map(hobby => {
  46.                         return (
  47.                           <span key={hobby}>{hobby} </span>
  48.                         )
  49.                       })
  50.                     }
  51.                   </td>
  52.                   <td>{student.collage}</td>
  53.                   <td>
  54.                     <button onClick={(ev) => {this.rmStudent(student.number,ev)}}>删除</button>
  55.                   </td>
  56.                 </tr>
  57.               );
  58.             })}
  59.           </tbody>
  60.         </table>
  61.         <p className="text-center">无学生信息</p>
  62.         <p>总共有 50 个学生</p>
  63.         <p>学生的平均年龄是 25</p>
  64.       </div>
  65.     );
  66.   }
  67. }
  69. export default StudentList;
  • App.js ```jsx import React, { Component } from “react”; import StudentTitle from “./Components/StudentTitle”; import AddStudent from “./Components/AddStudent”; import StudentList from “./Components/StudentList”;

class App extends Component { // 定义状态用于管理学员信息 state = { studentList: [ { number: “01”, name: “张三”, sex: “男”, age: 10, date: “2020-12-04”, hobbies: [“足球”, “篮球”], collage: “大前端”, }, { number: “02”, name: “李四”, sex: “男”, age: 20, date: “2030-12-05”, hobbies: [“足球”, “橄榄球”], collage: “Java”, }, { number: “03”, name: “王五”, sex: “男”, age: 30, date: “2040-11-03”, hobbies: [“足球”, “橄榄球”, “篮球”], collage: “python”, }, ], }; // 处理 studentList 状态

// 删除学生信息 removeStudent = (number) => { // 利用 number 找到 studentList 中需要删除的项，并删除当前项 // 将处理后的数据重新 setState 给 state，更新视图

  1. // 深拷贝原数据
  2. const studentList = JSON.parse(JSON.stringify(this.state.studentList))
  4. // 查找 number 对应项
  5. const index  = studentList.findIndex(student => student.number === number)
  7. // 删除
  8. studentList.splice(index, 1)
  10. // 更新
  11. this.setState({
  12.   studentList
  13. })

} render() { return (

); } }

export default App;

  2. <a name="HedYQ"></a>
  3. ## 计算平均值
  5. - StudentList.js
  6. ```jsx
  7. import React, { Component } from "react";
  9. class StudentList extends Component {
  10.   // 删除
  12.   render() {
  13.     // 解构出学生信息数据
  14.     const { studentList } = this.props;
  15.     // 总年龄之和
  16.     let totalAge = 0
  17.     studentList.forEach(hobby => totalAge += Number(hobby.age))
  18.     // 平均年龄
  19.     let averAge = 0
  20.     averAge = Math.floor(totalAge / studentList.length)
  21.     return (
  22.       <div className="col-md-6 col-md-offset-1">
  24.         { studentList.length > 0 ? null : <p className="text-center">无学生信息</p>}
  25.         <p>总共有 {studentList.length} 个学生</p>
  26.         <p>学生的平均年龄是 {averAge}</p>
  27.       </div>
  28.     );
  29.   }
  30. }
  32. export default StudentList;