Réagir au DND - canDrag en fonction de l'état du composant

Je suis confronté à un problème avec React-DND. Ma question concerne la prévention de draggind un composant pour un état spécifique. Mais "canDrag" ne peut avoir que des accessoires et surveiller comme des paramètres. (monitor.getItem montre null dans mon cas) et je ne peux pas utiliser les accessoires car ceux-ci seront présents dans chaque composant (puisque les accessoires proviennent du composant parent). Est-ce que quelqu'un a une idée pour résoudre ce problème?Réagir au DND - canDrag en fonction de l'état du composant

Thx

Source

2017-07-21 Marouen Mhiri

Eh oui il n'y a pas moyen d'accéder au composant lui-même de 'canDrag' que ses accessoires, et' monitor.getItem' seront retourne seulement quelque chose quand le glissement est en cours, puisque ce sont les données que vous transférez avec l'événement drag, pas le composant. Il semble que votre composant en fasse trop et devrait être divisé en un point où vous avez un sous-composant déplaçable qui peut avoir ses accessoires réglés via n'importe quel état que vous utilisez pour le contrôle, mais sans afficher votre code. difficile d'aider plus loin – alechill

Merci pour votre réponse! Mon composant contient un formulaire avec deux boutons. Un pour rendre les champs modifiables (c'est l'état 'éditable' du composant et dans ce cas il ne devrait pas être possible de faire glisser) et l'autre bouton est pour enregistrer les données. Donc, mon composant est très simple –

Dans ce cas, il semble que vous devriez avoir l'état suivi dans un composant wrapper, et le transmettre en tant que prop 'isEditable' à votre formulaire en tant que sous-composant. Cela peut ensuite être évalué dans 'canDrag' pour le sous-composant. Peut seulement aider plus loin si vous postez du code – alechill

-1

Vous pouvez le faire dans le composant plutôt que dans les spécifications

@DragSource(dragtype, sourceSpec, cnt => ({ 
    connectDragSource: cnt.dragSource(), 
})) 
export default class Dragable extends React.Component { 
    state = { 
    canDrag: false, 
    } 
    render() { 
    const { connectDragSource } = this.props; 
    const { canDrag } = this.state; 
    const cntDragSource = canDrag ? connectDragSource : i => i; 
    return cntDragSource(
    <div className="drag-target" /> 
    ) 
    } 
}

Source

2017-11-06 09:49:04 user7198300

Réagir au DND - canDrag en fonction de l'état du composant

Répondre

Questions connexes