React-Events：onMouseUp 在 onMouseEnter 事件后未触发

Question

在我的反应应用程序中，我有一个由节点组成的网格，每个节点都有一个 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&nbsp;://stackblitz.com/edit/grid-painter 。有些值是硬编码的，但主要概念就在那里。