发起和处理事件

本例中，我们的 Students 组件会包含多个 Student 组件。

在 React 中，每个组件只能操作自身的 state。假如需要在 Student 组件需要执行一个事件来操作 Students（比如删除一个 student 对象的操作，这需要操作 Students 的 state），要怎么办呢？

我们可以在 Students 组件定义相关方法，然后把该方法作为参数传递到 Student 组件中渲染。在 Student 中可以通过 props.参数名 来调用。

import React, { Component } from 'react';

class Student extends Component{
  state = {
    student: this.props.student,
  };

  render() {
    return (
      <table>
        <tbody>
          <tr>
            <td>name: {this.state.student.name}</td>
            <td>age: {this.state.student.age}</td>
            <td>
            <button 
              // 调用了 onDelete 方法
              // 也就是 students 组件的 handleDelete 方法
              // 把 student 组件自身的 id 作为参数
              // 从而修改 students 组件的 state
              onClick={() => this.props.onDelete(this.props.student.id)}
            >
              Delete
            </button>
            </td>
          </tr>
        </tbody>
      </table>
    );
  };
}


class Students extends Component{
  state = {
    students: [
      {id:1, name:'tom', age:12},
      {id:2, name:'jim', age:13},
      {id:3, name:'tim', age:14},
    ]
  };

  handleDelete = (studentID) => {
     // 处理删除 student 的方法
    // 输入一个 studentID，然后生成不包含该 id 的 student 列表
    // 最后修改 Students 组件的 state
    const students = this.state.students.filter(student => 
      student.id !== studentID);
    this.setState({students});
  };

  render() {
    return(
      <div>
        {this.state.students.map(student => 
          <Student 
            key={student.id} 
            // 在这里我们直接把 student 对象作为参数传递给 student 组件
            // 在 student 组件调用时使用：props.student
            student={student}
            // 这里把 handleDelete 方法作为参数传递给 student 组件
            // student 组件调用该方法，应使用：props.onDelete()
            onDelete={this.handleDelete}
            />
        )}
      </div>
    );
  };
}

export default Students;