React Draggable Stopping Onclick для детского компонента ⇐ CSS

[Anonymous]

Я пытаюсь создать перетаскиваемые карты, которые также могут перевернуться на щелчок. < /p>
Это моя карта < /p>

Код: Выделить всё

import { useState } from 'react'
import './Card.scss'

function Card() {
const [flip, setFlip] = useState(false)

return (

{setFlip(!flip)}}>
Front

{setFlip(!flip)}}>
Back


)
}

export default Card
< /code>
Это перетаскиваемая обертка для карты < /p>
import Draggable from 'react-draggable'
import Card from './Card'

function DraggableCard() {
return (





)
}

export default DraggableCard
< /code>
Это CSS, который должен запустить OnClick для переворачивания карты < /p>
.card {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 20px;
transform: perspective(1000px) rotateY(var(--rotate-y, 0deg))
translate(var(--translate-y, 0))
rotate(var(--rotate, 0deg));
transition: transform 0.7s;
transform-style: preserve-3d;
cursor: pointer;
height: 300px;
width: 200px;
background-color: rgb(219, 14, 14);
}

.front {
position: absolute;
}

.back {
position: absolute;
transform: rotateY(180deg);
}

.front, .back {
height: 100%;
width: 100%;
backface-visibility: hidden;
transition: transform 1s;
}

.card.flip {
--rotate-y: -180deg;
}
< /code>
Обработчик OnClick в карте должен изменить использование для «Flip», а затем, в свою очередь, изменить имя класса с «карты» на «Flip». Затем это должно запустить CSS, чтобы перевернуть карту. Я вижу, что название ClassName не изменяется при щелчке. Дополнительный  

вокруг компонента карты в DraggableCard, но, похоже, не изменил результат. Я упустил понимание readme из реагируемого на реагирование?>

Подробнее здесь: https://stackoverflow.com/questions/746 ... -component