时间戳

首页 > 解决方案 > 单击 isClearable 图标（仅限移动设备）时，如何阻止打开反应选择输入下拉菜单？

javascript - 单击 isClearable 图标（仅限移动设备）时，如何阻止打开反应选择输入下拉菜单？

问题描述

我制作了这个非常简单的代码框来显示我的问题。

在此处输入图像描述

当我单击添加isClearable到 Select 组件后出现的“x”图标时，它会清除选择并打开下拉列表。我不想打开下拉菜单，但我不知道如何停止它。有任何想法吗？

此问题仅存在于移动浏览器上。clear 功能在桌面浏览器上按预期工作。要在移动设备上查看代码框，请打开 Chrome 开发工具并单击“切换设备工具栏”按钮。

编辑：由于我还没有收到回复（22 小时），这里有更多细节。这个讨论最接近我的问题。他们讨论的原因可能是由于 react-tap-event-plugin。

我曾尝试使用 react-fastclick 包，因为我认为它可能是延迟点击（在移动设备中长按不会打开菜单）。

我尝试Select使用属性在组件周围添加一个 divonClick={e => { e.preventDefault(); e.stopPropagation(); }}

我尝试添加一个虚拟 div，并在组件中的事件document.getElementById("dummy").focus()结束时调用。onChangeSelect

编辑 2：如果为事件添加事件断点touchend，单击“x”导致脚本暂停，然后按 F8（恢复脚本），菜单将不会打开。一定有某种延迟点击发生。

标签： javascripthtmlreactjsdom-eventsreact-select

解决方案

我有一个 hacky 解决方案。我在组件中的事件函数属性pointer-events: null结束时在 css 中设置了 50 毫秒。如果有人知道使这项工作更简单的方法，请告诉我！onChangeSelect

temporarilyDisable = () => {
  const elementToDisable = document.getElementById('selectComponentID');
  const wait = ms => new Promise((r, j)=>setTimeout(r, ms))
  elementToDisable.setAttribute("style", "pointer-events: none")
  let prom = wait(50).then(() => elementToDisable.setAttribute("style", "pointer-events: all"))
}

推荐阅读