antd 表上的 onDragEnter/onDragLeave

Question

我在 antd 表上反应 onDragEnter/onDragLeave 事件时遇到问题。

作为参考，我使用 antd 和 React 18。

     /**
       * 
       * @param e 
       */
      function handleDragEnter(e: DragEvent<HTMLDivElement>) {
        console.log('e:', e)
        e.preventDefault()
        e.stopPropagation()
        setDragged(true)
      }
    
    
      /**
       * 
       * @param e 
       */
      function handleDragLeave(e: DragEvent<HTMLDivElement>) {
        console.log('e:', e)
        e.preventDefault()
        e.stopPropagation()
        setDragged(false)
      }

    return (
      <>
        <div className="DrivesList" onDrop={handleDrop} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
          <Table
            className={classNames({
              'DrivesList-table-loading': droppedFilesLoading,
            })}

....
     

正如您在下面的屏幕截图中看到的，当我在板上拖动时，事件会被多次触发：

作为信息，如果我评论表格（仍然是主要 div），这些事件可以完美运行。

有什么想法吗？

提前致谢。

PS：我想在拖动时在 div 周围添加边框。

Answer 1

您的问题与您在

<div ...> ... </div>

中处理 onDragEnter 和 onDragLeave 中的孩子有关。 在codesandbox中运行