react中使用 react-draggable 问题总结

本文主要是介绍react中使用 react-draggable 问题总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

react-draggable 是在使用 React 时经常用到的拖拽库，不过在使用时，下面是一些常见的问题，做此记录

1、在移动端中使用 react-draggable 进行拖拽操作时,在拖拽内部onClick事件是失效的
解决方案：使用onTouchStart来替换onClick事件

<button style={{float:'right'}} className="delete-btn" data-card-id={card.id} onTouchStart={()=>{handlerDeleteCard(card.id)}} >X</button>

2、拖拽结束，就会误触被包裹的元素中的 click 事件

<Draggable><button onClick={handleClick}>我是一个可拖拽的按钮</button>
</Draggable>

解决方案：通过手动维护一个“是否处于拖拽状态”的标识来做判断

import * as React from 'react';
import Draggable from 'react-draggable';import './style.css';export default function App() {let isDragging = false;const handleDrag = () => {isDragging = true;};const handleStop = () => {console.log('handleStop');// 触发 onStop 后会触发 onClick，加个 setTimeout 是为了让修改不“马上”发生，导致 handleClick 拿到的不是预期的结果setTimeout(() => (isDragging = false), 0);};const handleClick = () => {console.log('handleClick');if (isDragging) {return;}console.log('啊，我被 click 了');};return (<div><p>react-draggable 拖拽时规避误触发内容中的 click 事件</p><Draggable onDrag={handleDrag} onStop={handleStop}><button onClick={handleClick}>我是一个可拖拽的按钮</button></Draggable></div>);
}