React-dnd: 同じコンポーネントでDragSourceとDropTargetを使用しているが、DropTargetからの応答がない

作成日 2018年04月12日  ·  3コメント  ·  ソース: react-dnd/react-dnd

これをヘルプフォーラムとして使用する可能性がありますが、多大な努力にもかかわらず、このユースケースでは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)

最も参考になるコメント

_.flowを使用せずに同じコンポーネントでDragSourceとDropTargetを使用する方法を探している検索エンジンから来た人々のために、これはあなたがそれをする方法です:

export default
    DragSource(typeA, specA, collectA)(
        DropTarget(typeB, specB, collectB)(
            Component));

全てのコメント3件

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));
このページは役に立ちましたか?
0 / 5 - 0 評価