Question

在我的组件中，有本地的paid和droppedItems状态。

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

我指定了下面的drop规范，

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

虽然它识别出有一个被删除的项目，但它没有推到该状态。

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

提前致谢

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将已删除项目的对象推送到组件的状态。

1 个答案: