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

Question

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

让我解释：

下拉菜单是这样创建的：

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

显示如下：

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

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

我只想在选项列表关闭时触发 onChange，而不是之前的 3 次，其中用户无意选择任何值：

对我来说，直观地说，用户只想在按下回车键时选择值，或者单击选项，或者单击选项外部以关闭选项列表。否则她只是在四处浏览。但我不想为所有这些情况编写单独的侦听器。

就我而言，选择一个选项会产生很多后果，所以我想知道用户何时真正想要这样做。我怎样才能做到这一点？

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

谢谢！

标签： javascriptreactjssemantic-uisemantic-ui-react

Answer 1

从https://react.semantic-ui.com/modules/dropdown/，

selectOnNavigation true {bool}
使用箭头键导航菜单时是否更改值。设置为 false 将需要输入或左键单击以确认选择。