记住在多个函数之间的反应中绑定 this

Question

我有一个反应调度应用程序。如果用户尝试在接下来的 45 小时内安排某事，那么我想向他们发送一条警报消息，让他们可以确认他们选择的时间或更改时间。

我有一个组件Timepicker 处理用户选择的时间并返回用户选择的hour and minutes，如下所示：

renderTimes() {

    return this.props.availabilities.map(function(_av, i) {
    let av = new Date(_av);

    return (
        <a key={i} onClick={this.checkBookingWindow.bind(av.getHours(), av.getMinutes())} className="time-option">
      {_pretty_time(av.getHours(), av.getMinutes())}
    </a>
    );
    }.bind(this));
}

checkBookingWindow函数如下：

checkBookingWindow(hour, minute) {
    var time = new Date().getHours();
    let booking_window = Math.abs(time - hour);
    if (booking_window < 45 && this.state.waive_alert == false) {
        this.setState({open_popup: true});
    } else if (booking_window < 45 && this.state.waive_alert == true) {
        console.log("Waived all rights!");
        //(a) PLAN WAS TO ADD THE CALLBACK OVER HERE!
    } else if (booking_window > 45) {
        console.log("Booking window over 5 hours");
    }
 }

如果时间小于 45 并且如果用户没有放弃警报，那么它应该会弹出弹出窗口并呈现如下：

renderWarningPopup() {
if (this.state.open_popup) {
  return(
                <div>
                    <div className="dashboard-modal">
                        <div className="dashboard-modal-header">
                            <span onClick={this.handleCancel.bind(this)} className="icon-cancel modal-close"></span>
                        </div>
                        <div className="dashboard-modal-body">
                            <p className="small-body-text text-center">Your session is going to happen within the next 45 hours.</p>
                            <p className="small-body-text buffer-bottom-25 buffer-bottom-10-mobile text-center">Are you sure?</p>
                            <div className="schedule-alert-buttons">
                                <button onClick={this.handleCancel.bind(this)} className="btn btn-change-booking">Change Time</button>
                                <button onClick={this.handleSubmit.bind(this)} className="btn btn-confirm-booking">Yes</button>
                            </div>
                        </div>
                    </div>
                    <div className="modal-bg bg-transparent-black"></div>
                </div>
  )}
}

在这里点击Yes，用户之前选择的时间和日期应该被提交，我为此做了以下功能：

handleSubmit(evt) {
  evt.preventDefault();
  this.setState({ waive_alert: true});
  this.checkBookingWindow();
}

但由于显而易见的原因，它不会保留所选的小时和分钟值。在 React 中有没有办法做到这一点？

在更改代码以引发警报之前，我的renderTimes() 如下：

renderTimes() {

    return this.props.availabilities.map(function(_av, i) {
    let av = new Date(_av);

    return (
        <a key={i} onClick={this.props.onSelect.bind(null, av.getHours(), av.getMinutes())} className="time-option">
      {_pretty_time(av.getHours(), av.getMinutes())}
    </a>
    );
    }.bind(this));
}

所以我只是做了一个回调，它将返回选定的 hour 和 minutes。我现在想在 (a) 处做同样的事情，但前提是用户选择 Yes

Answer 1

您可以尝试在单击后将小时/分钟保存到类变量中，然后在handleSumbit() 中您可以使用这些变量调用checkBookingWindow()：

在 Timepicker 组件中定义： let selectedHour, selectedMinute;

在checkBookingWindow():

checkBookingWindow(hour, minute) {
   var time = new Date().getHours();
   let booking_window = Math.abs(time - hour);
   if (booking_window < 45 && this.state.waive_alert == false) {

    /* NEW CODE */
    this.selectedHour = hour;
    this.selectedMinute = minute;

    this.setState({open_popup: true});
   } else if (booking_window < 45 && this.state.waive_alert == true) {
      console.log("Waived all rights!");
      //(a) PLAN WAS TO ADD THE CALLBACK OVER HERE!
   } else if (booking_window > 45) {
      console.log("Booking window over 5 hours");
   }
}

最后，在handleSubmit()：

handleSubmit(evt) {
  evt.preventDefault();
  this.setState({ waive_alert: true});
  this.checkBookingWindow(this.selectedHour, this.selectedMinute);
}

为了确保handleSubmit() 知道this 是Timepicker 组件，您需要确保绑定它。看起来您已经这样做了，因为您将其称为onClick={this.handleSubmit.bind(this)}，所以您应该一切都好。另一种方法是使用arrow functions，因此您可以将其定义为handleSubmit= () => {}，而不是handleSubmit() {}。然后你可以输入onClick={this.handleSubmit}。