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 ://stackblitz.com/edit/grid-painter 。有些值是硬编码的，但主要概念就在那里。