React中react-draggable包裹的图标onClick点击事件不生效如何解决

根因说明 #

react-draggable 为了实现拖拽逻辑，内部会拦截处理鼠标事件，拖拽交互结束后会默认阻止原生点击事件触发。同时你直接将第三方图标组件作为Draggable的直接子元素，事件绑定存在透传冲突，导致自定义的onClick没有生效。

解决方法 #

方案1：拖拽位移判断（推荐，适合同时需要支持拖拽+点击的场景） #

判断拖拽结束后的位移，如果x、y方向位移都为0则视为点击操作，在Draggable的onStop回调中执行点击逻辑，同时给图标包一层原生div保证事件透传正常，修改后代码如下：

import styled from "@emotion/styled"
import Draggable from 'react-draggable';
import { BsPlusCircle } from 'react-icons/bs';

const StartWrapper = styled.div`
position: absolute;
bottom: 74px;
display: block;
margin: 0 auto;
width: calc(100% - 24px);
font-family: Montserrat, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
letter-spacing: 0em;
text-align: center;
color: rgba(91, 91, 91, 0.69);
border: 1px solid white;
height: 170px;
line-height: 170px;
`

export const App = ( ) => {
    const show = () => {
        console.log("Show");
    }

    const handleDragStop = (e, data) => {
        // 拖拽位移为0判定为点击
        if (data.x === 0 && data.y === 0) {
            show()
        }
    }

    return (
         <StartWrapper onClick={()=> console.log('外层点击')}>
                <Draggable onStop={handleDragStop}>       
                      <div>
                        <BsPlusCircle />
                      </div>
                </Draggable>
         </StartWrapper>
    )
}

方案2：cancel属性指定非拖拽区域（适合点击和拖拽区域分离的场景） #

如果需要点击图标时不触发拖拽，只允许其他区域拖拽，可以通过cancel属性指定图标为非拖拽区域，此时图标上的onClick可以直接生效：

<Draggable cancel=".no-drag">       
    <div>
        <BsPlusCircle className="no-drag" onClick={() => show()} />
    </div>
</Draggable>

内容的提问来源于stack exchange，提问作者Boidurja Talukdar