React-dnd: monitor.isDragging（）は、trueを返す必要があるときにfalseを返すことがあります

@amoenkはい、役立つサンプルコードが必要になります。

ご協力いただきありがとうございます！ 実例は次のとおりです： http ：

そして、バンドルされていないコードを閲覧するためのこのリンク： http ：

ああ、デバッグ中に元の単純な並べ替え可能なデモコードもそこに含めましたが、重要なコンポーネントはIngredientとIngredientGroupです。

あなたのコードを調べましたが、 DnDStudyコンポーネントが見つからないようです。 あなたの完全なコードとあなただけのコードを見せてくれませんか。 デモコードを削除できます。

デモコードが削除されました。DnDStudyコンポーネントは次のページコンポーネントです： http ：//notlouieagain.com/~amoenk/dnd/js/pages/DnDStudy.react.js

確認しましたが、 IngredientGroup内のDnDStudy IngredientGroupキーが原因で問題が発生している可能性があると思います。 配列のインデックスに依存する代わりに、 Ingredient内のIngredientGroup Ingredientと同様の一意のIDを使用してみてください。

コードは更新されましたが、それでも同じ問題です。

Ok。 その時私は間違っていました。

@gaearonあなたは助けることができますか？

isDraggingがコンポーネントツリー全体で機能するようにするには、ドラッグソースにisDraggingを手動で実装してください。

const ingredientSource = {
    beginDrag(props) {
        return { ingredient: props.ingredient };
    },
    isDragging(props, monitor) {
        return props.ingredient === monitor.getItem().ingredient;
    }
};

DragSourceドキュメントを参照してください：

isDragging(props, monitor) ：オプション。 デフォルトでは、ドラッグ操作を開始したドラッグソースのみがドラッグしていると見なされます。 カスタムのisDraggingメソッドを定義することで、この動作をオーバーライドできます。 props.id === monitor.getItem().idようなものが返される場合があります。 ドラッグ中に元のコンポーネントがアンマウントされ、後で別の親で「復活」する可能性がある場合は、これを実行します。 たとえば、かんばんボードのリスト間でカードを移動する場合、ドラッグされた外観を維持する必要があります。技術的には、コンポーネントがマウント解除され、別のリストに移動するたびに別のコンポーネントがマウントされます。 _注：このメソッド内でmonitor.isDragging()呼び出すことはできません。_

これは役に立ちますか？

完璧に動作します！ ドキュメントでそれを見逃したに違いありません。

ご助力いただきありがとうございます！ チケットを閉じます。

問題ない。 お力になれて、嬉しいです。

まぁ！ http://notlouieagain.com/へのリンクが応答していません...

問題の根本的な原因を見つけました。 DropTargetsとDragSourcesをラップするためにDragDropContextProviderの使用を停止する必要がありました。 以下の例を参照してください。
http://react-dnd.github.io/react-dnd/docs-drag-drop-context-provider.html

export default class YourApp {
    render() {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                /* ... */
            </DragDropContextProvider>
        )
    }
}

代わりに、DragDropContextを使用して、以下のようにクラス全体をラップする必要がありました。
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html

class YourApp {
    /* ... */
}
export default DragDropContext(HTML5Backend)(YourApp)

これですぐに問題が解決しました。