在 React 中删除表数据 (td) 值后设置状态

Question

我构建了一个List.js 组件来存储所有约会。

所有约会的列表显示在一个表格中，一个按钮允许删除约会并发送电子邮件作为确认。

根据用户类型，每行将包含一封学生/辅导员电子邮件。我想在删除一行时收到该电子邮件（<tr> 中的 <td>）并将状态设置为该电子邮件，以便我可以使用该状态作为收件人发送电子邮件。

这是组件代码（仅包括相关位 - 如果需要，将更新）：

// imports

export class Appointments extends Component {
  state = {
    email: "",
  };

  static propTypes = {
    // propsTypes...
  };

  componentDidMount() {
    // calling some async func
  }

  // other func

  getAppointmentEmail = (e) => {
    e.preventDefault();

    this.setState({ email: e.target.value });
    console.log(e.target.value);
  };

  deleteAppointmentEmail = (appointment) => {
    const { user } = this.props.auth;
    const message = "...";
    const email = {
      message,
      sender: "example@gmail.com",
      recipient: this.state.email,
    };
    console.log(email);
    // this.props.sendEmail(email);
  };

  render() {
    const { isCounselor } = this.props.clients;

    const studentHeader = <th>Student Contact</th>;
    const counselorHeader = <th>Counselor Contact</th>;

    return (
      <Fragment>
        <h4 className="text-center mt-3">Appointments</h4>
        <br />
        <table className="table table-striped mt-3">
          <thead>
            <tr>
              <th>Title</th>
              <th>Date</th>
              <th>Time</th>
              <th>Location</th>
              {isCounselor ? studentHeader : counselorHeader}
              <th />
            </tr>
          </thead>
          <tbody>
            {this.props.appointments.map((appointment) => (
              <tr key={appointment.id}>
                <td>{appointment.title}</td>
                <td>{appointment.date}</td>
                <td>{`${appointment.start_time.slice(0, 5)} -
                ${appointment.end_time.slice(0, 5)}`}</td>
                <td>{appointment.location}</td>
                <td name="email" value={this.state.email}>
                  {isCounselor
                    ? this.getStudentContact(appointment.student)
                    : this.getCounselorContact(appointment.counselor)}
                </td>
                <td>
                  <button
                    onClick={() => {
                      this.getAppointmentEmail;
                      this.props.deleteAppointment(appointment.id);
                      this.deleteAppointmentEmail(appointment);
                    }}
                    className="btn btn-danger"
                  >
                    {""}
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  // ...
});

export default connect(mapStateToProps, { // ... })(Appointments);

我尝试将value={this.state.email}/value={email} 添加到<td>，但它不起作用。

我也想知道getAppointmentEmail是否已正确构建，在删除按钮的onClick中调用是否正确？

你能建议吗？感谢您的帮助，不胜感激！

Answer 1

您可以将电子邮件联系人存储在变量中：

this.props.appointments.map(appointment => {
     const email = isCounselor ? this.getStudentContact(appointment.student) : this.getCounselorContact(appointment.counselor);
     return (
            <tr key={appointment.id}>
               //code inside row ...
            </tr>
      );
  })

然后点击删除按钮：

<button
  onClick={() => {
    this.getAppointmentEmail(email); // pass email inside the function and then set it in state
    this.props.deleteAppointment(appointment.id);
    this.deleteAppointmentEmail(appointment);
  }}
  className="btn btn-danger"
>
  {""}
  Delete
</button>