使用 Onclick 翻转卡片，卡片从 Json Data 排序答案

【问题标题】：Card flip with Onclick with cards randered from Json Data使用 Onclick 翻转卡片，卡片从 Json Data 排序
【发布时间】：2020-06-15 19:00:26
【问题描述】：

我有一个 json 列表，用于填充具有两侧的反应卡列表。单击按钮时，我想翻转到信息侧，但我只能让它翻转所有卡片。我可以通过在 CSS 中悬停来实现它，然后只有卡片悬停在翻转上。

下面是我的卡号

 <MDBRow class="row">  
            <ul className="ulWidth">
            <li className="liWidth"> {this.state.infos.map(post => {
                return (
                  <div key={post.id} id="menu">

                <MDBCol lg="4" className=" mb-3 column flip-card" id="myEltId">       
                      <MDBCard className="card  colCardinfoHeightImg flip-card-inner">
                        <img className="img-fluid infoImage"  src={require('../../images/infoImage.png')} />
                        <MDBCardBody>
                           <MDBCardTitle className="CardTitle text-uppercase text-bold">{post.infoName}</MDBCardTitle>
                          <MDBCardText>
                              <strong>Data Example 1:</strong> {post.jsonData1}<br/>
                              <strong>Data Example 2:</strong>  {post.jsonData2}<br/>

                              <strong>Data Example 3:</strong>  {post.jsonData3}<br/>

                          </MDBCardText>
                        </MDBCardBody>
                        <div class="flip-card-back">


                        <MDBCard className=" colCardinfoHeight">
                  <MDBCardBody>
                    <MDBCardTitle>{post.infoName}</MDBCardTitle>
                    <MDBCardText>
                        <p><strong>Data Example 3:</strong>{post.jsonData4}<br/>
                        <strong>Data Example 3:</strong> {post.jsonData5}
                        </p>
                        <hr/>
                        <p><strong>Data Example 3:</strong> {post.jsonData6}<br/>


                    </MDBCardText>
                    <MDBBtn className="infoButton" color="orange" size="lg" onClick={this.clickFlipFunction}>Switch Today</MDBBtn>
                  </MDBCardBody>
                </MDBCard>
                           </div>
                      </MDBCard>
                    </MDBCol>

                  </div>
                );
              })}
               </li>
            </ul>
          </MDBRow>

这是我目前尝试的翻转功能，但它会翻转所有渲染的卡片。

  onFlipCard(){
    $(document).ready(function(){  
        $(".flip-card").css("transform", " rotateY(180deg)");
        $(".flip-card-inner").css("transform", " rotateY(180deg)");
    });

   }

当我使用悬停标签在 css 文件中输入上述 css 并且当用户将鼠标悬停在它上面时它只会翻转正确的卡片但我需要它是一个可点击的功能。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

为卡片创建一个onClick 事件处理程序。
使用isCardFlipped 状态变量之类的东西跟踪卡片是否在组件内翻转。
每当调用onClick 时，切换isCardFlipped 状态值。
使用classnames 分配动态类名，以根据isCardFlipped 中的值显示flip-card 或flip-card-inner

编辑：我建议不要使用 jquery，或者直接执行 DOM 操作。使用 React 的主要好处（您可能错过了）是能够通过 React 的内部工作间接更新 DOM：简而言之，这仅允许更新那些已更改的 DOM 元素，而不是重绘整个 DOM共。阅读更多关于这个here

【讨论】：

【解决方案2】：

现在，您的事件处理程序正在获取具有“翻转卡”类的所有元素。这就是这部分正在做的事情：

$(".flip-card")

您需要使用对被点击的特定元素的引用，例如：

$(".flip-card").click(function(e){
    $(e.target).css("transform", " rotateY(180deg)");
});

Event.target reference

【讨论】：