2

在我的组件中，有已付款和已丢弃物品的本地状态。

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

我指定了如下的丢弃规范，

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

我想要做的是，当 anorderItem被放到目标上时，它会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

虽然它识别出有一个丢弃的项目，但它不会推送到该状态。

我怎样才能推Object到getItem组件的状态？我在这里做错了什么？

提前致谢

4

1 回答 1

2

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

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

此外，您的方法中的 if 语句handleDrop正在检查orderItem是否传入了 no ，这意味着代码永远不会在您想要的时候运行，我不熟悉您的update函数的作用（可能是不变地推送到数组），但也许像这样的东西会起作用......

handleDrop: function(orderItem) {
  if (!!orderItem) {
    this.setState(
      update(this.state, { droppedItems: { $push: [orderItem] } })
    )
  }
}
于 2017-01-13T11:07:29.867 回答