React-dnd: monitor.isDragging () أحيانًا ترجع القيمة false عندما يجب أن تعيد القيمة true

amoenk نعم ، سنحتاج إلى مثال على كود لمساعدتك.

شكرا لمساعدتك! هذا مثال عملي: http://notlouieagain.com/~amoenk/dnd/

وهذا الرابط لتصفح الكود المفكك: http://notlouieagain.com/~amoenk/dnd/js/

أوه ، لقد قمت بتضمين الكود التجريبي الأصلي البسيط القابل للفرز هناك أيضًا أثناء تصحيح الأخطاء ، لكن المكونات المهمة هي Ingredient و IngredientGroup.

لقد ألقيت نظرة على الكود الخاص بك ولا يمكنني العثور على مكون DnDStudy . هل يمكنك أن تريني رمزك الكامل وشفرتك فقط. يمكنك إزالة الكود التجريبي.

تمت إزالة الكود التجريبي ، مكون DnDStudy هو أحد مكونات الصفحة هنا: http://notlouieagain.com/~amoenk/dnd/js/pages/DnDStudy.react.js

حسنًا ، لقد ألقيت نظرة وأعتقد أنها قد تكون مشكلة بسبب المفاتيح IngredientGroup داخل DnDStudy . بدلاً من الاعتماد على فهرس المصفوفة ، حاول استخدام معرّف فريد مشابه لمعرّف Ingredient داخل IngredientGroup .

تم تحديث الرمز ، ولكن لا تزال نفس المشكلة.

موافق. كنت مخطئا حينها.

gaearon يمكنك المساعدة؟

لكي يعمل isDragging عبر شجرة المكونات ، يرجى تنفيذ isDragging يدويًا على مصدر السحب.

const ingredientSource = {
    beginDrag(props) {
        return { ingredient: props.ingredient };
    },
    isDragging(props, monitor) {
        return props.ingredient === monitor.getItem().ingredient;
    }
};

راجع مستندات DragSource :

isDragging(props, monitor) : اختياري. بشكل افتراضي ، يعتبر مصدر السحب الذي بدأ عملية السحب فقط بمثابة سحب. يمكنك تجاوز هذا السلوك بتحديد طريقة isDragging مخصصة. قد يُرجع شيئًا مثل props.id === monitor.getItem().id . قم بذلك إذا كان من الممكن إلغاء تثبيت المكون الأصلي أثناء السحب ثم "إحيائه" لاحقًا مع أحد الوالدين المختلفين. على سبيل المثال ، عند تحريك بطاقة عبر القوائم في لوحة Kanban ، فأنت تريدها أن تحتفظ بالمظهر المسحوب - على الرغم من أنه من الناحية الفنية ، يتم إلغاء تثبيت المكون ويتم تثبيت بطاقة مختلفة في كل مرة تقوم بنقلها إلى قائمة أخرى. _ ملاحظة: لا يمكنك استدعاء monitor.isDragging() داخل هذه الطريقة ._

هل هذا يساعد؟

يعمل بشكل مثالي! لابد أنه فاتك ذلك في المستندات.

شكرا لجميع التعليمات الخاصة بك! سأغلق التذكرة.

لا مشكلة. سررت بالمساعدة.

مه! الروابط إلى http://notlouieagain.com/ لا تستجيب ...

لقد وجدت السبب الجذري لمشكلتي. اضطررت إلى التوقف عن استخدام DragDropContextProvider لالتفاف DropTargets و DragSources. انظر المثال أدناه.
http://react-dnd.github.io/react-dnd/docs-drag-drop-context-provider.html

export default class YourApp {
    render() {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                /* ... */
            </DragDropContextProvider>
        )
    }
}

بدلاً من ذلك ، كان علي استخدام DragDropContext لإغلاق صفي بالكامل كما هو موضح أدناه.
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html

class YourApp {
    /* ... */
}
export default DragDropContext(HTML5Backend)(YourApp)

هذا على الفور حل المشكلة بالنسبة لي.