Javascript 还记得在多个函数之间进行反应时绑定吗

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

我有一个组件

Timepicker

，它处理用户选择的时间，并返回用户选择的

hour和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));
}

但由于明显的原因，它没有保留选定的小时和分钟的值。在React中有什么方法可以做到这一点吗

更改代码以引发警报之前，我的

renderTimes（）

如下所示：

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");
    }
 }

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));
}

renderTimes（）{
返回此.props.availabilities.map（函数（_av，i）{
设av=新日期（_av）；
返回(
{{u pretty_time（av.getHours（），av.getMinutes（））}
);
}.约束（这个）；
}

---

所以我只是做了一个回调，返回所选的

hour

和

minutes

。我现在想在（a）中做同样的操作，但只有在用户选择

Yes

后，您可以尝试在单击后将小时/分钟保存到类变量中，然后在

handleSumbit（）

中，您可以使用这些变量调用

checkBookingWindow（）

：

在时间选择器组件中定义：

让selectedHour，selectedMinute

在
checkBookingWindow（）中
：

为了确保
handleSubmit（）
知道
this
是时间选择器组件，您需要确保绑定它。看起来您已经这样做了，因为您将其命名为
onClick={this.handleSubmit.bind（this）}
，所以您应该都很好。另一种方法是使用，因此将其定义为
handleSubmit=（）=>{}
而不是
handleSubmit（）{}
。然后你可以把
onClick={this.handleSubmit}
为什么不把所选的小时和分钟放在状态或react类的属性上。bind不是这样工作的。调用
bind
返回一个新函数，其中包含绑定的上下文
（this）
，以及需要保存在某个位置的参数。另外，由于您正在设置状态，并且该状态在
中可用，
-正如@JohnRuddell所提到的-将小时和分钟置于状态并从状态中访问值有什么害处？@anon023432将其添加到状态对于本用例来说是完全正确的。如果你真的不想那么你可以把它添加到类中
this.hour=hour
和
this.minute=minute
是的，确认操作的概念与重新呈现相关，但是如果将来需要更新存储的选定小时/分钟而不重新呈现，该怎么办？通过将其添加到状态，您可能会增加技术债务。而且它的开销更大，并且为我们树立了一个坏的先例。我想我们都同意，从技术上讲，可以将这些变量添加到state，并使其与现有代码配合使用，但我正在讨论您应该做什么。当然，我理解您的意思，我仍然认为将其添加到state是可以的。我看到了相反的情况，因为变量不在状态，所以必须多次调用forceUpdate（）。两者之间必须保持平衡。就浏览器性能而言，除非您正在进行视频（60 fps）之类的操作，否则此用例的设置状态不会有问题。。如果您看到我不久前就这个问题发表的评论，我引用了state和local类变量作为潜在的解决方案。这两种方法都是可能的，也是可行的viable@JohnRuddell这对我的案子来说是有道理的。我想我应该像erikamjoh建议的那样将其存储在变量中，以防止将来出现任何问题。但是谢谢你的帮助help@JohnRuddell，关于forceUpdate（）的观点很好，我同意def需要有一个平衡-anonn023432应该记住这一点，如果您确实需要选定的小时/分钟来导致重新渲染，您应该将它们移动到状态，而不是调用forceUpdate（）。只要您知道这个tho，出于我前面提到的原因，我倾向于将其存储在变量中。Def同意这两种解决方案都是可行的。
handleSubmit(evt) {
  evt.preventDefault();
  this.setState({ waive_alert: true});
  this.checkBookingWindow();
}

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));
}

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(evt) {
  evt.preventDefault();
  this.setState({ waive_alert: true});
  this.checkBookingWindow(this.selectedHour, this.selectedMinute);
}