React-dnd: monitor.isDragging() renvoie parfois false alors qu'il devrait renvoyer true

@amoenk Oui, nous aurons besoin d'un exemple de code pour vous aider.

Merci pour ton aide! Voici l'exemple de travail : http://notlouieagain.com/~amoenk/dnd/

Et ce lien pour parcourir le code dégroupé : http://notlouieagain.com/~amoenk/dnd/js/

Oh, j'y ai également inclus le code de démonstration triable simple d'origine pendant le débogage, mais les composants importants sont Ingredient et IngredientGroup.

J'ai regardé votre code et je n'arrive pas à trouver le composant DnDStudy . Pouvez-vous me montrer votre code complet et uniquement le vôtre. Vous pouvez supprimer le code de démonstration.

Code de démonstration supprimé, le composant DnDStudy est un composant de page ici : http://notlouieagain.com/~amoenk/dnd/js/pages/DnDStudy.react.js

Ok, j'ai jeté un coup d'œil et je pense que cela peut être un problème à cause des clés de IngredientGroup intérieur de DnDStudy . Au lieu de vous fier à l'index du tableau, essayez d'utiliser un identifiant unique similaire à celui de Ingredient intérieur de IngredientGroup .

Code mis à jour, mais toujours le même problème.

D'accord. J'avais tort alors.

@gaearon pouvez-vous m'aider ?

Pour que isDragging fonctionne dans l'arborescence des composants, veuillez implémenter manuellement isDragging sur votre source de glissement.

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

Voir les DragSource docs :

isDragging(props, monitor) : Facultatif. Par défaut, seule la source de glissement qui a initié l'opération de glissement est considérée comme faisant glisser. Vous pouvez remplacer ce comportement en définissant une méthode isDragging . Il peut renvoyer quelque chose comme props.id === monitor.getItem().id . Faites-le si le composant d'origine peut être démonté pendant le déplacement et plus tard « ressuscité » avec un parent différent. Par exemple, lorsque vous déplacez une carte à travers les listes d'un tableau Kanban, vous souhaitez qu'elle conserve l'apparence déplacée, même si techniquement, le composant est démonté et un autre est monté chaque fois que vous le déplacez vers une autre liste. _Remarque : Vous ne pouvez pas appeler monitor.isDragging() dans cette méthode._

est-ce que cela aide?

Fonctionne parfaitement! J'ai dû manquer ça dans la doc.

Merci pour votre aide! Je vais fermer le ticket.

Aucun problème. Heureux d'aider.

euh ! Les liens vers http://notlouieagain.com/ ne répondent pas...

J'ai trouvé la cause première de mon problème. J'ai dû arrêter d'utiliser DragDropContextProvider pour envelopper mes DropTargets et DragSources. Voir l'exemple ci-dessous.
http://react-dnd.github.io/react-dnd/docs-drag-drop-context-provider.html

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

Au lieu de cela, j'ai dû utiliser le DragDropContext pour envelopper toute ma classe comme ci-dessous.
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html

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

Cela a immédiatement résolu le problème pour moi.