javascript - React-Events:onMouseEnter事件后onMouseUp不触发

在我的react应用程序中，我有一个由节点组成的网格，每个节点都有一个onMouseUp，onMouseDown和onMouseEnter侦听器。我发现拖动鼠标并在网格上移动后，即使放开鼠标，它也不会触发onMouseUp。我的代码如下所示：

         // inside my render function
         {this.state.grid.map((row, rowIdx) => {
              return (
                <div key={rowIdx}>
                  {row.map((node, nodeIdx) => {
                    const {
                      row,
                      col
                    } = node;
                    return (
                      <Node
                        key={nodeIdx}
                        col={col}
                        onMouseDown={(row,col) => {this.handleMouseDown(row,col)}}
                        onMouseEnter={(row, col) =>this.handleMouseEnter(row, col)}
                        onMouseUp={(row, col) =>this.handleMouseUp(row, col)}
                        row={row}></Node>
                    );
                  })}

我的handleMouseUp函数是：

handleMouseUp = (row,col) => {
   ...
}

在每个节点中，我通过以下方式引用这些回调：

           return (
            <div
                onMouseDown={() => onMouseDown(row, col)}
                onMouseEnter={() => onMouseEnter(row, col)}
                onMouseUp={() => onMouseUp(row,col)}>
            </div>
          );

每个节点的CSS属性包括（不确定是否与此有关）：

    user-drag: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -moz-user-select: none;

有人知道如何解决此问题吗？谢谢！！

最佳答案

似乎只有在光标仍位于onMouseUp中的情况下单击才能触发<div/>。
尝试使用onDragEnd并在draggable='true'中设置<div/>看看是否可行。

编辑：为了简单起见，我建议将逻辑移到父容器。您可以参考此演示：https://stackblitz.com/edit/grid-painter。有些值是硬编码的，但主要概念在那里。