来自 dnd-kit 的侦听器干扰了 input：checkbox 的 onChange 事件

问：

来自 dnd-kit 的侦听器干扰了 input：checkbox 的事件onChange

当我使用 input：checkbox 事件时，dnd-kit 会干扰 onchange 事件。侦听器在输入（我检查了 input：checkbox 和 input：radio）元素中禁用 onchange 事件。如果我删除/禁用/commnet-out {...listeners} input：checkbox 事件工作正常。 但我需要两个{...listeners} 和 onchange 事件，因为没有我无法实现拖放。onchange{...listeners}{...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>

**如果我禁用onchange事件工作正常**{...listeners}

<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>