语义 UI React - 当下拉选项列表仍然打开时不触发 onChange

Question

我在 ReactJS 上有一个语义下拉菜单，我只想在用户确实 select 一个选项时触发 onChange 事件，而不是在选项列表仍然显示时触发。

让我解释一下：

下拉菜单是这样创建的：

<Dropdown
  placeholder='Select language'
  fluid
  search
  selection
  options={options}
  onChange={...}
/>

显示如下：

当您点击它时，它会打开（下拉？）选项列表：

问题是，当您使用向下箭头转到所需的选项时，它会在您每次按下向下箭头时触发 onChange。 在此在这种情况下，要达到 Aragones，它会触发 onChange 4 次。

我只想在选项列表关闭时触发 onChange，而不是前 3 次，用户不是故意的 select任意值：

对我来说，直觉上，用户只想 select 当他按下回车键，或在选项中单击，或在选项外单击以关闭选项列表时的值。否则她只是四处浏览。但我不想为所有这些情况编写单独的听众。

在我的例子中，select选择一个选项会产生很多后果，所以我想知道用户什么时候真正想要这样做。我该怎么做？

作为替代方案，我可以收听选项列表的显示或隐藏事件吗？或在 onChange 中询问选项列表是显示还是隐藏？

谢谢！

Answer 1

来自 https://react.semantic-ui.com/modules/dropdown/,

selectOnNavigation true {bool}
Whether or not to change the value when navigating the menu using arrow keys. Setting to false will require enter or left click to confirm a choice.