使用React样式组件处理onClick

Question

我在尝试创建记忆游戏网格时遇到问题，当我单击网格项目时，它会打开。目前，我有一个正常工作的网格，但是我只能通过悬浮将其使用，并且不了解状态变化时如何使其与click事件一起使用。

基本上我的网格项目代码树是

<Box onClick={this.handleOpenCard}>
  <Front />
  <Back>
    <img src="" alt="" />
  </Back>
</Box>

我要做的是，当我单击卡时，将组件状态更改open为true。当此状态为true时，我希望使用样式组件执行css动画，该动画将卡旋转到180度。当我将鼠标悬停在项目上时，请查看完整的组件代码当前可在哪些地方工作，请告诉我如何实现该代码或重构代码。

import React, { Component } from "react";
import styled from "styled-components";

const Box = styled.div`
    position: relative;
    perspective: 1000px;
`;

const Front = styled.div`
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    backface-visibility: hidden;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;

    ${Box}:hover & {
        transform: rotateY(180deg);
    }

    img {
        width: 100%;
        max-width: 75px;
    }
`;
const Back = Front.extend`
    background-color: #ffeb3b;
    transform: rotateY(180deg);

    ${Box}:hover & {
        transform: rotateY(0deg);
    }
`;

class Card extends Component {
    state = {
        open: false
    };

    handleOpenCard = e => {
        this.setState({ open: true });
    };

    render() {
        return (
            <Box open={this.state.open} onClick={this.handleOpenCard}>
                <Front />
                <Back>
                    <img
                        src={
                            process.env.PUBLIC_URL +
                            `/images/svg/${this.props.path}`
                        }
                    />
                </Back>
            </Box>
        );
    }
}

export default Card;

Answer 1

您可以非常轻松地访问样式组件中的道具。

在你的盒子里：transform: ${props => props.open ? rotateY(180deg) : rotateY(0deg)}

将道具传递给孩子们：

Front = styled.div`

`

Box = styled.div`
   ${Front} {
      transform: ${props => props.open ? rotateY(180deg) : rotateY(0deg)}
    }
`