React dnd 将掉落项目的对象推送到组件的状态。
React dnd to push object of dropped item to component's state.
在我的组件中,有付费和掉落物品的本地状态。
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
推到组件的状态?我在这里做错了什么?
提前致谢
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] } })
)
}
}
在我的组件中,有付费和掉落物品的本地状态。
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
推到组件的状态?我在这里做错了什么?
提前致谢
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] } })
)
}
}