React-dnd: monitor.isDragging()이 true를 반환해야 할 때 false를 반환하는 경우가 있습니다.

@amoenk 예, 도움이 되는 예제 코드가 필요합니다.

당신의 도움을 주셔서 감사합니다! 작동 예는 다음과 같습니다. http://notlouieagain.com/~amoenk/dnd/

그리고 이 링크는 번들되지 않은 코드를 찾아볼 수 있습니다. http://notlouieagain.com/~amoenk/dnd/js/

아, 디버깅하는 동안 정렬 가능한 원래의 간단한 데모 코드도 포함했지만 중요한 구성 요소는 Ingredient와 IngredientGroup입니다.

귀하의 코드를 살펴보았지만 DnDStudy 구성 요소를 찾을 수 없는 것 같습니다. 당신의 완전한 코드와 당신의 것만 보여줄 수 있습니까? 데모 코드를 제거할 수 있습니다.

데모 코드 제거, DnDStudy 구성 요소는 여기에서 페이지 구성 요소입니다: http://notlouieagain.com/~amoenk/dnd/js/pages/DnDStudy.react.js

좋아, 내가보고했고 나는 그것이 인해의 키에 문제가있을 수 있다고 생각 IngredientGroup 내부 DnDStudy . 대신 배열의 인덱스에 의존, 유사한 몇 가지 고유 한 ID를 사용하려고 Ingredient 내부 IngredientGroup .

코드가 업데이트되었지만 여전히 동일한 문제입니다.

확인. 그때 내가 틀렸다.

@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 와 같은 것을 반환할 수 있습니다. 드래그하는 동안 원래 구성 요소가 마운트 해제되고 나중에 다른 상위 요소로 "부활"될 수 있는 경우 이 작업을 수행하십시오. 예를 들어, Kanban 보드의 목록에서 카드를 이동할 때 드래그한 모양을 유지하기를 원합니다. 비록 기술적으로 구성 요소가 마운트 해제되고 다른 목록으로 이동할 때마다 다른 카드가 마운트되더라도 말입니다. _참고: 이 메서드 내에서 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)

이것은 즉시 문제를 해결했습니다.