javascript - react 事件 : onMouseUp not firing after onMouseEnter event

Question

在我的 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;

有谁知道如何解决这个问题吗？谢谢!!

Answer 1

看来onMouseUp仅当光标仍在 <div/> 时取消单击时才会触发。
尝试使用onDragEnd并设置draggable='true'在 <div/>看看它是否有效。

编辑:为了简单起见，我建议将逻辑移动到父容器。可以引用这个demo:https://stackblitz.com/edit/grid-painter 。有些值是硬编码的，但主要概念就在那里。