使用 Onclick 翻转卡片，卡片从 Json 数据中排序

Question

I have a json list which i used to populate a list of react cards which has two sides. I want to flip to the info side when a button is clicked but I can only get it to flip all the cards. i can achieve it with hover within the css then only card hovered over flips.

Below is my card code

 <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>

this is the flip function i have attempted at the minute but it flips all the cards that are rendered.

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

   }

it works when i input the above css in the css file with the hover tag used and when the user hovers over it flips only the right card but i need it to be a clickable function.

Answer 1

Right now your event handler is getting all elements with the class "flip-card". That's what this part is doing:

$(".flip-card")

What you'll need instead is to use a reference to the specific element that was clicked, something like:

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

Event.target reference

Answer 2

1. Create an onClick event handler for the card.
2. Track whether the card is flipped or not within the component using something like an isCardFlipped state variable.
3. Whenever onClick is called, toggle the isCardFlipped state value.
4. Assign dynamic classnames using classnames , to show either flip-card or flip-card-inner based on the value in isCardFlipped

Edit: I would advice against the use of jquery, or to perform direct DOM manipulation. The major benefit of using React, which you might have missed out on, is to be able to update the DOM indirectly via React's internal working: in a gist, this allows only those DOM elements to be updated which have changed versus redrawing the entire DOM altogether. Read more on this here