添加类以响应 div onClick答案

【问题标题】：Adding class to react div onClick添加类以响应 div onClick
【发布时间】：2019-09-03 04:41:01
【问题描述】：

我正在尝试创建一个卡片组件。我想在点击时翻转卡片。如何添加动画以旋转卡片 onClick？到目前为止我的代码：

import React, { Component } from 'react';

class FlipCard extends Component {
    constructor(props) {
    super(props);
    this.state = {
      active: true 
    }
  }   

cardClick=()=>{
    const currentState = this.state.active;
    this.setState({
        active: !currentState
    });
}

    render(){
        return(
            <div>
                <div 
                 className={this.state.active ? 'newCard, flipMe' : 'newCard'}
                 onClick = {this.cardClick}
                >
                    <div className='frontCard'> I'm Front </div>

                    <div className='backCard'> I'm Back </div>

                </div>

              </div>
            )
    }
}

export default FlipCard;

样式：

.newCard{
  position: absolute;
  width:200px; height: 200px;
  transform-style: preserve-3d;
  transition: all 0.5s ease 
}


.flipMe{
  transform: rotateY(180deg);
}

.frontCard{
  position: absolute;
  width:100%; height: 100%; background-color:grey;
  backface-visibility: hidden
}

.backCard{
  position: absolute;
  width:100%; height: 100%; background-color:grey;
  backface-visibility: hidden;
  transform: rotateY(180deg)
}

所以当卡片被点击时，我改变了活动状态，我希望卡片旋转并显示backCard div。如果我添加hover，它可以工作：

.newCard:hover{
  transform: rotateY(180deg);
}

但我想要它 onClick 而不是悬停。我该怎么做？

【问题讨论】：

当您的应用首次呈现时，不会显示任何卡片，只有“I'm Front”文本位于后向位置。这是预期的吗？
@ChristopherNgo 不。这不是预期的。我希望正确显示“我在前面”文本，并且 onClick 想要翻转卡片并显示 backCard div。
我认为flipMe 样式不会被应用，因为'newCard, flipMe' className 属性中的逗号,。你应该删除它className={this.state.active ? 'newCard flipMe' : 'newCard'}
@Somename 是否也修复了 onClick 的转换？
@ChristopherNgo 是的。它也修复了 onClick 转换。

标签： javascript reactjs react-native animation css-animations

【解决方案1】：

给你的元素一个 ref 属性并用 "this.refs" like this 改变它的类名：

class FlipCard extends React.Component {

handleClick(){
  this.refs.Card.classList.toggle("backCard");
  this.refs.Card.classList.toggle("frontCard");
  this.refs.frontCard.classList.toggle("deactive");
  this.refs.frontCard.classList.toggle("active");
  this.refs.backCard.classList.toggle("deactive");
  this.refs.backCard.classList.toggle("active");
}

render(){
  return (
    <div>
      <div 
        ref="Card" 
        className="frontCard"
        onClick={this.handleClick.bind(this)}>
        <div 
          ref="frontCard" 
          className="active">Front Card</div>
        <div 
          ref="backCard" 
          className="back deactive">Back Card</div>
      </div>
    </div>
  )
}
}


export default FlipCard

CSS：

.frontCard{
  display: flex;
  width: 25vw;
  height: 25vw;
  background-color: blue;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 1s ease;
}

.backCard{
  transform: rotatey(180deg);
  transition: 1s ease;
  display: flex;
  width: 25vw;
  height: 25vw;
  background-color: blue;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.deactive{
  display: none;
}
.back {
  transform: rotatey(180deg);
}

.active {
  display: block;
  transform: rotatey();
}

【讨论】：