web-dev-qa-db-ja.com

React styled-componentsでのonClickの処理

メモリゲームグリッドを作成しようとしていて、グリッドアイテムをクリックすると、それが開くという問題があります。現在、私は作業グリッドを持っていますが、ホバーを使用してそれを操作することができました。状態が変化したときにクリックイベントでそれを機能させる方法がわかりません。

基本的に私のグリッドアイテムコードツリーは

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

カードをクリックすると、コンポーネントの状態がopenからtrueに変わります。この状態がtrueの場合、styled-componentsを使用して、カードを180度回転させるCSSアニメーションを実行します。アイテムの上にカーソルを置いたときに現在機能しているコンポーネントコード全体を参照してください。それを実現する方法またはコードをリファクタリングする方法を教えてください。

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;
reactjsstyled-components
5
Sangsom

Styled-componentsの小道具に非常に簡単にアクセスできます。

ボックス内：transform: ${props => props.open ? rotateY(180deg) : rotateY(0deg)}

小道具を子供に渡すには：

Front = styled.div`

`

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