react-dnd | 易学教程

Can Someone help me to convert typescript code to React Code

阅读更多关于 Can Someone help me to convert typescript code to React Code

问题 There is a package called react-data-grid. And there is an example table on that particular package but the code is in TypeScript and also docs for this particular version are not there. I tried to convert the typescript to React. Everything was fine until I wanted to implement Drag and Drop. Some error is coming and I think that error is because I'm importing something in the wrong way. Can you tell me where I'm doing anything wrong? Here is the Sandbox link. The error in my local build is

How to swap two cards without changing position other cards

阅读更多关于 How to swap two cards without changing position other cards

问题 I have images in grid form something like this I am well aware of react dnd and it uses hover to get the positions and swap accordingly. What I want : Swap 1 with 4 and 4 with 1 What is happening: While moving image 1 I am hovering it from 2 and 3 so the images in between are getting swapped here I have modified my moveCard function to match my requirement. const moveCard = useCallback((dragIndex, hoverIndex) => { const dragCard = cards; [dragCard[dragIndex], dragCard[hoverIndex]] = [

How to swap two cards without changing position other cards

阅读更多关于 How to swap two cards without changing position other cards

ReactDnD: “Invariant Violation: addComponentAsRefTo” Error

阅读更多关于 ReactDnD: “Invariant Violation: addComponentAsRefTo” Error

问题 Dear people of StackOverflow, I am trying to implement Drag and Drop functionality in a React-Rails app. However, as soon as I add the DragDropContext to the top level component, I see this error in the browser console: 'react.self-0f0e88a….js?body=1:1087 Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded'

How to use React DnD with styled component?

阅读更多关于 How to use React DnD with styled component?

问题 When wrapping my styled component in connectDragSource I get the following error: Uncaught Error: Only native element nodes can now be passed to React DnD connectors.You can either wrap PaneItemText__StyledItem into a <div> , or turn it into a drag source or a drop target itself. The first suggestion from this message is to wrap my styled component in a <div> , but this will mess with my layout and would prefer not to do this. I'm not sure what the second option is suggesting - would anybody

React/Dnd: Make a component draggable and droppable at the same time

阅读更多关于 React/Dnd: Make a component draggable and droppable at the same time

问题 There are multiple elements, which I want to get draggable and droppable at the same time - using react dnd . That means I need to drag one of the elements and drop it over another element. First I defined the dragSource for MyComponent. That works so far. But how do I have to setup the DropTarget for the same component? import React, { Component } from 'react' import { DragSource, DropTarget } from 'react-dnd' const elementSource = { beginDrag (props) { return { } } } const elementTarget = {

react-dnd getDecoratedComponentInstance() is not a function

阅读更多关于 react-dnd getDecoratedComponentInstance() is not a function

问题 I am currently building a feature for file upload and sorting within react. I have used the following examples: https://gaearon.github.io/react-dnd/examples-chessboard-tutorial-app.html https://github.com/okonet/react-dropzone https://github.com/gaearon/react-dnd-html5-backend Everything worked fine, until it came to eslint telling me not to use findDOMNode within js/componenets/File.jsx in my repository below. https://github.com/GregHolmes/react-dnd-dropzone It happens when I try to re-sort

How to avoid native onDrop event from being overwritten for react-dnd?

阅读更多关于 How to avoid native onDrop event from being overwritten for react-dnd?

问题 I'm successfully using react-dnd in a react component for a requirement of the application I'm working on. Said component also has a button that show a simple modal window: <Modal show={this.props.show} onHide={this.props.onHide} id={'image-modal'} {...this.props} animation={true}> ... <Modal.Body> <div id="drop-target" onDragOver={this.handleDrag} onDrop={this.handleDrop}> <div className="text-center"><p>Put your image here</p></div> </div> </Modal.Body> ... </Modal> As you can see, this

React DnD: Avoid using findDOMNode

阅读更多关于 React DnD: Avoid using findDOMNode

问题 I don't fully understand it but apparently it isn't recommended to use findDOMNode(). I'm trying to create drag and drop component but I'm not sure how I should access refs from the component variable. This is an example of what I currently have: const cardTarget = { hover(props, monitor, component) { ... // Determine rectangle on screen const hoverBoundingRect = findDOMNode(component).getBoundingClientRect(); ... } } Source Edit It might be caused by my component being both the drag and drop

How to avoid native onDrop event from being overwritten for react-dnd?

阅读更多关于 How to avoid native onDrop event from being overwritten for react-dnd?

I'm successfully using react-dnd in a react component for a requirement of the application I'm working on. Said component also has a button that show a simple modal window: <Modal show={this.props.show} onHide={this.props.onHide} id={'image-modal'} {...this.props} animation={true}> ... <Modal.Body> <div id="drop-target" onDragOver={this.handleDrag} onDrop={this.handleDrop}> <div className="text-center"><p>Put your image here</p></div> </div> </Modal.Body> ... </Modal> As you can see, this modal contains a div element that is listening for native html drag and drop events. My problem is that