React 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] } })
    )
  }
}

React dnd 将掉落项目的对象推送到组件的状态。

React dnd to push object of dropped item to component's state.

reactjs

react-dnd