react中使用 react-draggable 问题总结

丢丢的大神

已于 2024-01-08 23:10:59 修改

阅读量1.1k

点赞数 7

文章标签： react.js 前端前端框架

于 2024-01-08 23:09:47 首次发布

本文链接：https://blog.csdn.net/qq_34159635/article/details/135468598

版权

本文介绍了在React中使用react-draggable库时遇到的两个问题：移动端拖拽时onClick失效，以及拖拽结束时可能导致点击事件误触发。作者提供了使用touchStart替代onClick以及维护isDragging标识的解决方案。

摘要由CSDN通过智能技术生成

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