来自 dnd-kit 的监听器正在干扰输入：checkbox 的 onChange 事件

Question

来自 dnd-kit 的监听器正在干扰输入：复选框的

onChange

事件

当我使用 input:checkbox

onchange

事件 dnd-kit 的

{...listeners}

会干扰 onchange 事件。侦听器禁用输入 （我检查了 input:checkbox 和 input:radio） 元素中的 onchange 事件。如果我删除/禁用/commnet-out {...listeners} input:checkbox 事件工作得很好。 但我需要 {...listeners} 和 onchange 事件，因为没有

{...listeners}

我无法实现拖放。

我尝试过的代码如下：

<div
            {...attributes}
            {...listeners}
            ref={setNodeRef}
            style={style}
            className={styles.itemWrapper}
        >
            <div
                className={styles.item}>
                <img src={item.image} alt="Image title goes here..." />
                <input type="checkbox" id={item.id.toString()}
                    onChange={() => {
                        console.log('checked/unchecked') // doesn't print in console
                        handleSelection(item.id)
                    }}
                />
                <label htmlFor={item.id.toString()} ></label>
            </div>
        </div>

** 如果我禁用

{...listeners}

onchange 事件工作正常 **

<div
            {...attributes}
           // {...listeners} // disabled
            ref={setNodeRef}
            style={style}
            className={styles.itemWrapper}
        >
            <div
                className={styles.item}>
                <img src={item.image} alt="Image title goes here..." />
                <input type="checkbox" id={item.id.toString()}
                    onChange={() => {
                        console.log('checked/unchecked') // print in console 
                        handleSelection(item.id)
                    }}
                />
                <label htmlFor={item.id.toString()} ></label>
            </div>
        </div>

<div
            {...attributes}
            {...listeners}
            ref={setNodeRef}
            style={style}
            className={styles.itemWrapper}
        >
            <div
                className={styles.item}>
                <img src={item.image} alt="Image title goes here..." />
                <input type="checkbox" id={item.id.toString()}
                    onChange={() => {
                        console.log('checked/unchecked') // on change event should work with {...listenters enabled}
                        handleSelection(item.id)
                    }}
                />
                <label htmlFor={item.id.toString()} ></label>
            </div>
        </div>

Answer 1

也许你应该尝试阻止鼠标事件在输入事件处理程序中冒泡，我也遇到过类似的问题，希望它也对你有用

Answer 2

您应该尝试在 useSensors 中添加延迟，然后直到用户握住该元素时它才会拖动。

查看文档： 指针激活约束或触摸激活约束。

const sensors = useSensors(
    useSensor(MouseSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),
    useSensor(TouchSensor, {
      activationConstraint: {
        delay: 200,
        tolerance: 6,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );