Réagir dnd pour pousser l'objet de l'objet déposé à l'état du composant.

Question

Dans mon composant, il y a l'état local de paidItems et paid.

constructor() { 
super(); 
this.state = { 
    droppedItems: [], 
}; 

Et je spécifié aux chutes comme ci-dessous,

drop(props, monitor) { const orderItem = monitor.getItem(); },

Ce que je veux faire est que lorsqu'un orderItem est tombé à la cible, il pousse orderItem à l'état de droppedItems Donc, pour faire que j'ai fait handleDrop fonction

handleDrop (orderItem) { 
if(!orderItem){ 
    this.setState(update(this.state, { 
    droppedItems: orderItem ? { 
    $push: [orderItem] 
    } : {} 
})); 
} 
else return false; 
} 

Et appelle comme e est

return connectDropTarget(
      <div className="payment_block" onDrop={this.handleDrop}> 

Dans ma fonction de rendu, il y a const { canDrop, connectDropTarget, getItem} = this.props;

Ci-dessous est le résultat de console.log(this.props)

Object { id: 1, order: Object, channel: undefined, dispatch: routerMiddleware/</</<(), connectDropTarget: wrapHookToRecognizeElement/<(), canDrop: false, itemType: "order_item", getItem: Object

Bien qu'il reconnaisse qu'il ya un élément déposé, il ne pousse pas à la Etat.

Comment puis-je pousser au-dessus de Object de getItem à l'état du composant? Qu'est-ce que je fais mal ici?

Merci à l'avance

Answer 1

La signature de drop reçoit également votre DND décoré component comme troisième argument, vous devriez donc être en mesure d'appeler votre méthode handleAdd.

drop(props, monitor, component) { 
    component.handleDrop(monitor.getItem()); 
} 

également l'instruction if dans votre méthode handleDrop est la vérification qu'aucun orderItem est transmis, ce qui signifie que le code ne fonctionnera jamais quand vous le voulez, je ne suis pas familier avec la fonction de ce que votre update fait (vraisemblablement pousser vers le tableau), mais peut-être quelque chose comme ça fonctionnerait ...

handleDrop: function(orderItem) { 
    if (!!orderItem) { 
    this.setState(
     update(this.state, { droppedItems: { $push: [orderItem] } }) 
    ) 
    } 
}