响应 dnd 将放置的项目的对象推送到组件的状态。

Question

在我的组件中，有已支付和已删除项目的本地状态。

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

我指定了如下所示的掉落规范，

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

我想要做的是，当一个orderItem被放置到目标时，它将orderItem推送到droppedItems状态所以要做到这一点，我做了handleDrop函数

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

并这样称呼它

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

虽然它识别出有一个掉落的物品，但它不会推送到状态。

如何将getItem Object推送到组件的状态？ 我在这里做错了什么？

提前致谢

Answer 1

drop的签名还接收您的 dnd 装饰component作为其第三个参数，因此您应该能够调用您的handleAdd方法。

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

此外，您的handleDrop方法中的 if 语句正在检查是否没有传入orderItem ，这意味着代码永远不会在您想要的时候运行，我不熟悉您的update函数的作用（大概是一成不变地推送到数组） ，但也许这样的事情会起作用......

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