选择时间后自动关闭 Ant Design TimePicker答案

【问题标题】：Auto Close Ant Design TimePicker after choosing time选择时间后自动关闭 Ant Design TimePicker
【发布时间】：2020-05-21 16:22:15
【问题描述】：

默认情况下，Ant Design TimePicker 仅在单击时间选择器外部时关闭。

我有一个 12 小时 TimePicker 默认设置为上午 12:00，当用户选择小时、分钟和上午/下午时如何自动关闭它，这样用户就不必在外面点击TimePicker 手动关闭它？

<TimePicker format="h:mm a" use12Hours defaultOpenValue={moment('24:00', 'h:mm a')} />

【问题讨论】：

如果用户先选择am/pm怎么办？你还想关闭你的时间选择器吗？
也许在打开的面板底部添加一个“完成”按钮，这样用户在完成后可以点击它，而不是在时间选择器之外点击。
@ShivamGupta 我的观点是它应该自动关闭以改善用户体验，而无需用户手动关闭它
@martinschwartz 当用户首先点击上午/下午时会发生什么？那么这将是糟糕的用户体验
@ShivamGupta 当用户选择小时并选择分钟并选择上午/下午时，它应该关闭

标签： reactjs momentjs antd timepicker

【解决方案1】：

您可以使用TimePicker 组件中的open 属性并使用状态值来显示/隐藏时间选择器。因此，每次用户点击时间更改时，您都可以使用onChange 属性将状态值更改为 false

const [open, setOpen] = useState(false);
<TimePicker
 ...
 open={open}
 onOpenChange={() => {setOpen(true)}})
 onChange={() => {setOpen(false)}}
></TimePicker>

【讨论】：

我怎么知道用户是否已经选择了小时、分钟和上午/下午？
我没有在 Timpicker 中获得页脚.. 有人有解决方案吗？