[功能]: react-beautiful-dnd已弃用，建议官方改为 dnd-kit

[elkon028]

描述

react-beautiful-dnd 已弃用，建议官方改为 dnd-kit

但我在使用 dnd-kit 过程中遇到的问题是 Drag handle 不知道如何排除 Checkbox 组件
如果 Drag handle 放在 setNodeRef 上 则checkbox将不能响应事件

return (
    <div
      className="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
      ref={setNodeRef}
      style={style}
      {...attributes}>
      <IconMdiDrag
        className="mr-8px h-full cursor-move text-icon"
        {/* Drag handle 放在这里是为了让 checkbox 能响应事件 */}
        {...listeners}
      />
      <Checkbox
        checked={checked}
        className="flex-1"
        onClick={handleChange}>
       {/* Drag handle 放在这里是为了让 checkbox 能响应事件 */}
        <span {...listeners}>{title}</span>
      </Checkbox>
    </div>
  )

可能我没有认真阅读 dnd-kit 文档，如果哪位大神知道如何在 listeners 中排除某个子元素，请赐教

建议的解决方案

• 替换依赖包

pnpm remove react-beautiful-dnd
pnpm add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable

• 修改组件
• src/components/advanced/DragContent.tsx

import type { DragEndEvent } from '@dnd-kit/core'
import type { FC } from 'react'

import { DndContext } from '@dnd-kit/core'
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Checkbox } from 'antd'

interface Props {
  readonly columns: AntDesign.TableColumnCheck[]
  readonly setColumnChecks: (checks: AntDesign.TableColumnCheck[]) => void
}

interface TableColumnCheck extends AntDesign.TableColumnCheck {
  readonly id: string | number
  readonly index: number
  readonly setColumnChecked: (checked: boolean, index: number) => void
}

const SortableItem = ({ checked, id, index, setColumnChecked, title }: TableColumnCheck) => {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  }

  const handleChange = () => {
    setColumnChecked(checked, index)
  }

  return (
    <div
      className="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
      ref={setNodeRef}
      style={style}
      {...attributes}>
      <IconMdiDrag
        className="mr-8px h-full cursor-move text-icon"
        {...listeners}
      />
      <Checkbox
        checked={checked}
        className="flex-1"
        onClick={handleChange}>
        <span {...listeners}>{title}</span>
      </Checkbox>
    </div>
  )
}

const DragContent: FC<Props> = ({ columns, setColumnChecks }) => {
  const dragEnd = ({ active, over }: DragEndEvent) => {
    if (active.id !== over?.id) {
      const activeIndex = columns.findIndex(i => i.key === active.id)
      const overIndex = columns.findIndex(i => i.key === over?.id)
      const newlist = arrayMove(columns, activeIndex, overIndex)
      setColumnChecks(newlist)
    }
  }

  const setColumnChecked = (value: boolean, index: number) => {
    columns[index].checked = !value
    setColumnChecks([...columns])
  }

  return (
    <DndContext
      modifiers={[restrictToVerticalAxis]}
      onDragEnd={dragEnd}>
      <SortableContext
        items={columns.map((item: AntDesign.TableColumnCheck) => item.key)}
        strategy={verticalListSortingStrategy}>
        {columns.map((item: AntDesign.TableColumnCheck, index: number) => (
          <SortableItem
            checked={item.checked}
            id={item.key}
            index={index}
            key={item.key}
            setColumnChecked={setColumnChecked}
            title={item.title}
          />
        ))}
      </SortableContext>
    </DndContext>
  )
}

export default DragContent

替代方案

No response

额外的上下文

No response

[Ohh-889]

我很早就注意到了 在升级2.0中 会顺手替换一下的