React Functional Component 中映射对象的 react-draggable 保存位置

Question

如何让每个可拖动对象都有自己的状态。例如，如果我拖动其中一个对象，所有其他映射的对象共享相同的状态，因此彼此跟随。我怎样才能让每一个都分开。

// State
const [x, setX]= useState(0)
const [y, setY]= useState(0)

const handleStop = (event, dragElement) => {
    setX(dragElement.x)
    setY(dragElement.y)
  };

{ numberofGraphs.map( (si, k) => (
       
       <>
       <Draggable
        onStop={handleStop} 
        position={{x: x, y:y}}
       > 
       
       <div className="resizablebox"> 
       
       </div>
       </Draggable>
     
       </>

Answer 1

创建一个新的自定义组件来呈现您的 Draggable 并在其中移动状态。这样每个 Draggable 现在都会有自己的状态，而不是所有 .

自定义组件

const [x, setX]= useState(0)
const [y, setY]= useState(0)

const handleStop = (event, dragElement) => {
    setX(dragElement.x)
    setY(dragElement.y)
  };

return (
       <>
       <Draggable
        onStop={handleStop} 
        position={{x: x, y:y}}
       > 
       
       <div className="resizablebox"> 
       
       </div>
       </Draggable>
      )

现在在地图中您可以渲染

numberofGraphs.map( (si, k) => (
      <CustomComponent />
)

这样做的好处是，当您在 CustomComponent1 中拖动某些东西时，只有它会重新渲染，因为它有自己的原子状态。

React Functional Component 中映射对象的 react-draggable 保存位置

react-draggable save position of mapped objects in React Functional Component

draggable

reactjs