ドロップされたアイテムのオブジェクトをコンポーネントの状態にプッシュするためにdndに反応します。

Question

私のコンポーネントには、支払済みおよび欠落したアイテムのローカル状態があります。

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

そして私は私が何をしたいのか、以下のように

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

をドロップ仕様を指定orderItemがターゲットにドロップされたとき、それはやることがdroppedItemsの状態にorderItemをプッシュということですそれを作りましたhandleDrop関数

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

そして、それをthそれがドロップされた項目があることを認識しますが、私のレンダリング機能で

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

は、以下const { canDrop, connectDropTarget, getItem} = this.props;

は、それがプッシュしていない、console.log(this.props)

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

から結果がされています状態。

ObjectのgetItemをコンポーネントの状態にプッシュするにはどうすればよいですか？私はここで間違って何をしていますか？事前

Answer 1

で

おかげでdropの署名はまたあなたのDNDが、その3番目の引数としてcomponentを飾ら受けるので、あなたのhandleAddメソッドを呼び出すことができるはずです。あなたのhandleDrop方法で文が何orderItemがあなたはそれがしたい時にコードが実行されることはありません意味し、渡されないことを確認した場合

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

はまた、私は（何あなたupdate機能が行うに精通していませんよたぶんこのようなものがうまくいくでしょう...

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