在 React 中使动态元素可移动

Question

我正在使用 moveableJS 使元素可移动。当我对 div 标签进行硬编码时，它会按预期移动。但是，当我尝试动态添加 div 标签时，例如单击按钮时，新添加的 div 标签不可移动。

代码修改自此处

import * as React from 'react';
import Moveable from 'react-moveable';
import './App.css';

export default function App() {
  const targetRef = React.useRef(null);
  const [box, setBox] = React.useState([]);

  function addBox() {
    setBox((prevboxes) => {
      return [...prevboxes, `target${box.length + 1}`];
    });
  }
  return (
    <div className="root">
      <button onClick={addBox}>Add box</button>
      <div className="container">
        <div className="target">Target</div>
        {box.map((boxElement) => {
          return (
            <div className="target" id={boxElement}>
              Target
            </div>
          );
        })}
        <Moveable
          target={['.target']}
          draggable={true}
          throttleDrag={1}
          edgeDraggable={false}
          startDragRotate={0}
          throttleDragRotate={0}
          onDrag={(e) => {
            e.target.style.transform = e.transform;
          }}
        />
      </div>
    </div>
  );
}

我的理解是，Moveable 无法识别稍后添加的 className 'target' 元素。我如何让它识别这个新添加的元素？

Answer 1

我的解决方案是：

const [layoutItems, setLayoutItems] = useState<LayoutItem[]>([]); // all items

useEffect(() => {
    if (moveableRef.current) {
        moveableRef.current.updateSelectors();
    }
}, [layoutItems]);