使用Onclick翻转卡片，使用来自Json Data的卡片

Question

我有一个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 时，它有效，当用户将鼠标悬停在它上面时，它只会翻转正确的卡片，但我需要它是一个可点击的功能。

Answer 1

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

编辑：我建议不要使用jquery，或者直接执行DOM操作。使用 React 的主要好处是，您可能错过了，它能够通过 React 的内部工作间接更新 DOM：简而言之，这只允许更新那些已经更改的 DOM 元素，而不是完全重新绘制整个 DOM。在此处阅读更多相关信息

Answer 2

现在，您的事件处理程序正在获取带有"flip-card"类的所有元素。这就是这部分正在做的事情：

$(".flip-card")

相反，您需要的是使用对单击的特定元素的引用，例如：

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

事件.目标引用