これをヘルプフォーラムとして使用する可能性がありますが、多大な努力にもかかわらず、このユースケースではDropTargetから応答を得ることができません。
ドロップイベントを自分自身に登録できる一連の「カテゴリカード」を使用したいと思います。
私はここで明白な失敗をしていますか?
DragSource関数が機能していることは確認できますが、DropTarget仕様の関数からログに記録されたものは何もコンソールに反映されておらず、完全に適用されていないようです。
import React, { Component } from 'react'
import { DropTarget, DragSource } from 'react-dnd'
import _ from 'lodash'
export const ItemTypes = {
CATEGORY: 'category-item'
}
class CategoryTreeFork extends Component {
componentWillReceiveProps = (nextProps) => {
console.log("Next cat props", nextProps)
}
render(){
var { thisCat, childCat, level, dropEvent } = this.props
const { connectDragSource, connectDropTarget, isDragging, isOver } = this.props
return connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
)
}
}
/* get dragged */
const sourceSpec = {
beginDrag(props){
return { category_id: props.thisCat.category_id }
}
}
const sourceCollect = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}
}
/* get dragged onto */
const targetSpec = {
drop(props, monitor, component) {
const item = monitor.getItem()
console.log("me or my friend?", item)
},
hover(props, monitor, component){
console.log("yo what you hoverin there for homie?")
}
}
const targetCollect = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
}
}
export default _.flow([
DragSource(ItemTypes.CATEGORY, sourceSpec, sourceCollect),
DropTarget(ItemTypes.CATEGORY, targetSpec, targetCollect)
])(CategoryTreeFork)
DXは気にせず、その直後にレンダリングでconnectDropTargetを呼び出すのを忘れていたことに気づきました。 これは修正です:
return connectDropTarget(connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
これで私の問題は解決しました。 「単純な」ソート可能な例に従い、ダブルデコレータを実行しましたが、 connectDropTarget
を適用しませんでした
_.flow
を使用せずに同じコンポーネントでDragSourceとDropTargetを使用する方法を探している検索エンジンから来た人々のために、これはあなたがそれをする方法です:
export default
DragSource(typeA, specA, collectA)(
DropTarget(typeB, specB, collectB)(
Component));
最も参考になるコメント
_.flow
を使用せずに同じコンポーネントでDragSourceとDropTargetを使用する方法を探している検索エンジンから来た人々のために、これはあなたがそれをする方法です: