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(); }，之前用户选择的时间和日期应该提交，我也做了以下功能：

renderTimes()

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

在更改代码以提升警报之前，我的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和Yes的回调。我想在（a）处做同样的事情，但仅在用户选择find <dir> | grep json$

之后

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}。

记住在多功能之间做出反应就可以对此进行绑定

1 个答案: