reactjs - 如何使用 react-draggable 将拖动的组件重置到其原始位置？

Question

我尝试在我的应用中实现一个功能，允许用户重置他拖动的所有组件以重置到它们的原始位置。

我假设这个功能存在于 react-draggable 因为这个关闭和发布的问题:“允许重置拖动位置”(https://github.com/idanen/react-draggable/issues/7)。但是我没有在文档中找到任何提示(https://www.npmjs.com/package/react-draggable)。

stackoverflow 中有一个相同内容的问题，但已被删除(https://stackoverflow.com/questions/61593112/how-to-reset-to-default-position-react-draggable)。

感谢您的帮助:-)

Answer 1

GitHub 上的引用问题引用了一个 commit .查看此提交中所做的更改后，我发现 resetState 回调已添加到 useDraggable Hook 中。在提交的另一个地方，我发现对测试文件的更改显示了钩子(Hook)的用法。

function Consumer(props) {
    const {
      targetRef,
      handleRef,
      getTargetProps,
      resetState,
      delta,
      dragging
    } = useDraggable(props);
    const { style = defaultStyle } = props;
    return (
      <main
        className='container'
        ref={targetRef}
        data-testid='main'
        style={style}
        {...getTargetProps()}
      >
        {dragging && <span>Dragging to:</span>}
        <output>
          {delta.x}, {delta.y}
        </output>
        <button className='handle' ref={handleRef}>
          handle
        </button>
        <button onClick={resetState}>reset</button>
      </main>
    );
  }

钩子(Hook)返回一组回调，包括这个回调，可用于重置可拖动对象的状态。