我如何通过可拖动的反应将拖动的组件重置为其原始位置？

Question

我尝试在我的应用程序中实现一个功能，该功能允许用户将他拖动的所有组件重置为原始位置。

我假设此功能存在于可拖动的状态，因为存在以下已发布的问题：“允许重置拖动位置”（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回调。在提交的另一个地方，我找到了对测试文件的更改，该更改显示了挂钩的用法。

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>
    );
  }

该钩子返回一组回调，包括此回调，可用于重置可拖动状态。