我尝试在我的应用程序中实现一个功能，允许用户重置他拖动的所有组件以重置到其原始位置。
我假设这个功能存在于 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）。
谢谢你的帮助 ：-）
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>
);
}
钩子返回一组回调，包括这个回调，可以用来重置draggable的状态。
您可以以非常随意的方式执行此操作。可能还有另一种方法可以更安全地设置状态，但我并没有深入研究它。
import React from 'react';
export default class 😊 extends Component {
constructor(props) {
super(props);
this.draggableEntity = React.createRef();
}
resetDraggable() {
try {
this.draggableEntity.current.state.x = 0;
this.draggableEntity.current.state.y = 0;
} catch (err) {
// Fail silently
}
}
render() {
return (
<Draggable
ref={this.draggableEntity}
>
<img onClick={(e) => {this.resetDraggable()}}></img>
</Draggable>
)
}
}
我希望组件在放下组件时重置回其原始位置。
我使用钩子监控组件是否被拖动，当它是假的时重置位置，否则它将是未定义的。
export default function DraggableComponent(props: any) {
const {label} = props
const [isDragging, setIsDragging] = useState<boolean>(false)
const handleStart = (event: any, info: DraggableData) => {
setIsDragging(true)
}
const handleStop = (event: any, info: DraggableData) => {
setIsDragging(false)
}
return (
<Draggable
onStart={handleStart}
onStop={handleStop}
position={!isDragging? { x: 0, y: 0 } : undefined}
>
<Item>
{label}
</Item>
</Draggable>
)
}