javascript - 反应：将按下的鼠标移动到 2D 网格上方时出现错误

Question

我正在做一个反应项目，我需要一个网格。我用数组创建了它。一行由 10 个单元格组成，一个网格由 10 行组成。我需要处理单元格上的 3 个鼠标事件，因为稍后我需要为它们着色。MouseUp、MouseEnter 和 MouseDown。只有当 mouseDown 发生时才应处理鼠标进入功能（在网格上移动按下的鼠标 - 用 1 个动作为多个单元格着色）在实现它们之后，我意识到有一个错误，当鼠标按下时发生，然后从一排拉到另一排。

为了简化和产生问题，只有 2 行就足够了（不需要事件处理，只需为单元格指定宽度和高度以形成网格）。如果我进行垂直移动（两行中的任何位置），以下垂直移动将引发光标阻塞问题。我查看了互联网上的几个简单反应游戏，它们都产生相同的问题。使用空网格，未安装任何鼠标事件。

我想问题是行刷新的方式。有什么解决方案可以摆脱这个烦人的光标错误/行刷新问题，还是与反应状态有关？

标签： javascriptreactjscursor

Answer 1

解决方案是在单元格上为 mouseDown 事件添加 preventDefault 处理。

return (
    <div
      className="cell"
      onMouseDown={(e) => {
        e.preventDefault();
      }}       
    >
      {" "}
    </div>
  );