react中使用 react-draggable 问题总结

2024-01-08 23:40:24

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

文章来源:https://blog.csdn.net/qq_34159635/article/details/135468598
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。