onClick不工作的可拖动图标在react js?

Question

我有一个可拖动的图标。但是onClick不能在那个图标上工作。

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");
}
return (
<StartWrapper onClick={()=> start()}>
<Draggable>       
<BsPlusCircle  onClick={() => show()}  />
</Draggable>
</StartWrapper>
)
}

start功能起作用。但是show功能不起作用。如有任何帮助，我将不胜感激。

Answer 1

看起来你需要传递一个ref给StartWrapper和Draggable组件

import styled from "@emotion/styled";
import { useRef } from "react";
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 ref = useRef(null); //ADD THIS
const show = () => {
console.log("Show");
};
return (
//Then pass refs to StartWrapper and Draggable
<StartWrapper ref={ref} onClick={() => console.log("Hello")}>
<Draggable ref={ref}>
<BsPlusCircle onClick={() => show()} />
</Draggable>
</StartWrapper>
);
};

codesanbox

findDOMNode在StrictMode中已弃用。向findDOMNode传递了一个DraggableCore的实例，该实例位于StrictMode

Answer 2

<Draggable cancel=".clickable">
<div className="clickable" onClick={() => callFunc()}></div>
</Draggable>