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