用时间选择器组件组合反应日期

Question

我添加了2个动画GIF，以更具体地解决该问题。

您好，我正在工作一个React项目，将airbnb/react-dates与一个timepicker自定义组件结合起来。

工作流程为：
1.用户在打开的第一个日历<SingleDatePicker />上选择了一天
2. <SingleDatePicker>被隐藏，并且显示timepicker component。
3.用户选择一个时间，然后timepicker，更新日历日期/时间，然后将其隐藏。
4.第二个<SingleDatePicker>已启用，聚焦并打开。
5.与第一个<SingleDatePicker>

相同的过程

问题

我无法确定何时显示时间选择器，何时不显示。 这是由于focusChange函数： focusChange({ focused }, calendar, timePicker) { // handle the visiblility of calendars & timepickers this.setState({ [calendar]: focused, [显示$ {timePicker} ]: !focused }); }

案例：
1.日历已打开，用户单击外部=>日历将关闭，但时间选择器将打开。 （还应该隐藏时间选择器）
请参见GIF：
2.用户选择日期并选择时间（第一个日历）=>第二个日历打开。 当我们单击第一和第二日历（输入）之间的可互换时，总是有相反的时间选择器打开。
查看GIF：

您可以播放现场示例：https://codesandbox.io/s/5v459yrwk4?fontsize=14

我需要的是，要知道日历是由于一天的选择而关闭的，因此要打开时间选择器，以及由于clickoutside而关闭它的时间，所以不要显示timepicker。 / p>

欢迎任何帮助。