React：onClick on Mobile (iPhone) 需要 2 次点击？

Question

视频演示问题

我有一堆可点击的组件，当点击它们时，会在一行中添加一个“卡片”。在台式机上，它运行良好，但在移动设备上（在 iPhone 上测试，对于 Android 平板电脑似乎不是问题），它需要连续点击同一按钮 2 次才能启动该onClick功能。

这些组件也有onMouseEnter/onMouseLeave效果，以控制全局状态，进而决定是否多个组件应该应用额外的 CSS（所以我不能让它成为一个简单的 CSS 悬停效果）。

我相信鼠标效果会干扰点击事件，但我不知道如何解决这个问题。这是该组件的相关代码：

const CardSource = ({ addCard, note, setHoveredNote, hoveredNote }) => {
  return (
    <Source
      onClick={() => addCard(note)}
      onMouseEnter={() => setHoveredNote(note)}
      onMouseLeave={() => setHoveredNote(null)}
      className={
        hoveredNote && hoveredNote.index === note.index ? "highlight" : null
      }
    >
      {note.letters[0]}
    </Source>
  );
};

此外，一旦按钮已经被挖掘了两次，悬停效果CSS“大棒”到该按钮，永不移动到另一个按钮。这似乎发生在 iPhone 和 Android 平板电脑上。我也希望这种事情不再发生。

我在沙箱中创建了此问题的工作演示，如果在移动设备上查看，您应该能够重新创建这些问题：https : //codesandbox.io/s/mobile-requires-2-taps-i9zri?file= /src/Components/CardSource/CardSource.js

Answer 1

您可以只使用 csshover而不是通过事件添加类onMouseEnter，它修复了两次点击问题。

链接到沙箱

如果您要以编程方式使用触发器进行悬停。您可以通过使用事件（在沙箱中注释）来解决两次点击问题onTouchEnd。

希望有帮助。