Установить состояние после удаления значения данных таблицы (td) в React

Question

Я создал компонент List.js, в котором хранятся все встречи.

Список всех встреч отображается в таблице, а кнопка позволяет удалить встречу и отправить электронное письмо в качестве подтверждения.

Каждая строка будет содержать электронное письмо студента / консультанта в соответствии с тип пользователя. Я хотел бы получить это электронное письмо, когда я удаляю строку (<td> in <tr>) и устанавливаю состояние для этого электронного письма, чтобы я мог отправить электронное письмо, используя его в качестве получателя.

Это код компонента (включая только соответствующие биты - будет обновляться при необходимости):

// 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>