如何用JavaScript和React Hooks创建首次拖拽即生效的可拖拽组件

需要拖拽两次才生效是两个典型的React闭包陷阱+反模式写法导致的：

• 第一次触发dragstart调用setDragId时，React状态更新是异步的，此时已经绑定到DOM元素上的handleDrop事件闭包里捕获的dragId还是初始值undefined，第一次执行sortImages拿不到正确的拖拽元素ID，排序逻辑完全不生效；等第一次拖拽完成组件重渲染后，dragId才更新为正确值，第二次拖拽时handleDrop才能拿到有效ID完成排序。
• 在useEffect里手动调用document.createElement插入DOM、原生绑定事件的写法违反React声明式渲染逻辑，每次依赖项变化都会重复绑定事件、插入重复节点，进一步放大闭包问题。另外原代码里还存在ref变量名不一致、缺少拖拽必要事件拦截的隐性bug。

完全移除手动DOM操作逻辑，用React声明式语法直接渲染拖拽元素，同时用ref存储当前拖拽ID避免状态异步导致的闭包问题，修正后可直接实现首次拖拽生效：

const App = ({images}) => {
  const [selectedImages, setSelectedImages] = useState(images)
  // 用ref存拖拽ID，更新同步无延迟，规避状态异步的闭包问题
  const dragIdRef = useRef(null)

  const handleDrag = (ev) => {
    dragIdRef.current = ev.currentTarget.id
  }

  const handleDrop = (ev) => {
    ev.preventDefault()
    const currentDragId = dragIdRef.current
    if (!currentDragId) return
    const sortedImages = sortImages(selectedImages, currentDragId)
    setSelectedImages(sortedImages)
    dragIdRef.current = null
  }

  // HTML5拖拽API要求必须阻止dragover默认行为，否则drop事件不会触发
  const handleDragOver = (ev) => {
    ev.preventDefault()
  }

  return (
    <Container
      images={selectedImages}
      handleDrag={handleDrag}
      handleDrop={handleDrop}
      handleDragOver={handleDragOver}
    />
  )
}

export default App

const Container = ({ images, handleDrag, handleDrop, handleDragOver }) => {
  return (
    <div className="relative">
      <div>
        {/* 直接用JSX渲染元素，不需要手动操作DOM */}
        {images.map((img) => (
          <div
            key={img.id}
            id={img.id}
            draggable={true}
            onDragStart={handleDrag}
            onDrop={handleDrop}
            onDragOver={handleDragOver}
            style={{ position: 'absolute' /* 保留其余原有定位、样式属性 */ }}
          >
            <img src={img.src} alt="" />
          </div>
        ))}
      </div>
    </div>
  )
}

export default Container

• 用useRef存储拖拽ID，ref值更新是同步的，拖拽开始时立刻写入ID，drop时直接读取，不存在状态异步更新的延迟问题
• 完全移除useEffect里手动创建DOM、绑定事件的逻辑，改用JSX声明式渲染列表，符合React数据流规则，不会出现重复插入节点、事件闭包过期的问题
• 补充onDragOver事件的阻止默认行为逻辑，适配原生HTML5拖拽API的触发规则
• 列表渲染补充必填的key属性，保证React更新DOM时的节点正确性

内容的提问来源于stack exchange，提问作者grabury