reactjs - 在映射 ReactJS 中显示/隐藏 div

Question

我目前正在学习 ReactJS，并且在尝试隐藏/显示 div 时遇到了一个问题!以下代码正在运行，但是当我单击“了解更多”按钮时，它会隐藏每张卡片上的每个描述，但我只想在我单击它的地方显示/隐藏描述。

import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import JobApplicationList from './JobApplicationList';
import Card from "react-bootstrap/Card";
import ScriptTag from 'react-script-tag';



export default class Home extends React.Component{
    
    constructor(){
        super()
        this.state={
            showMe:true,
            advLists: []
        }
    }

    operation(){
        this.setState({
            showMe:!this.state.showMe
        })
    }

    
    
      componentDidMount() {
        Axios.get(`http://localhost:3001/get/adv`)
          .then(res => {
            const advLists = res.data;
            
            this.setState({ advLists });
          })
      }

      

render(){
    

    return (
        
        <div className="main-page">
            <div className="adv_container">
                {this.state.advLists.map((val, key) => {
                    return (
                        <div className="card_">
                            <Card style={{ width: "100%" }}>
                                <Card.Body>
                                    <Card.Title>{val.compName}</Card.Title>
                                    <Card.Subtitle className="mb-2 text-muted">
                                    {val.city} | {val.compWebsite}
                                    </Card.Subtitle>
                                    <Card.Subtitle className="mb-2 text-muted">
                                    {val.salaire} €
                                    </Card.Subtitle>
                                    { this.state.showMe?
                                        <div className="description">
                                        <Card.Text>{val.description}</Card.Text>
                                        </div>
                                        :null
                                    }
                                    <Card.Link onClick={()=> this.operation()} id="toto" href="#">Learn more</Card.Link>
                                    <Card.Link href="#">Apply</Card.Link>
                                </Card.Body>
                                
                                
                            </Card>
                        </div>
                    );
                })}

            </div>
        </div>
    )
}
}

我有点知道出了什么问题，当我按下按钮时，我给每张卡片都显示了 showMe 状态，但我不知道如何修复它!
在此先感谢您的帮助。

Answer 1

制作首字母 showMe状态为空并转换 operation取一个索引来切换。如果索引已保存在 state 中，则设置回 null。

operation(index) {
  this.setState({
    showMe: this.state.showMe === index ? null : index,
  })
}

使用映射的索引传递给处理程序并根据 showMe 检查此索引。状态以显示卡。

{this.state.advLists.map((val, key) => {
  return (
    <div className="card_">
      <Card style={{ width: "100%" }}>
        <Card.Body>
          <Card.Title>{val.compName}</Card.Title>
          <Card.Subtitle className="mb-2 text-muted">
            {val.city} | {val.compWebsite}
          </Card.Subtitle>
          <Card.Subtitle className="mb-2 text-muted">
            {val.salaire} €
          </Card.Subtitle>
          {this.state.showMe === key && ( // <-- check if index/key matches
            <div className="description">
              <Card.Text>{val.description}</Card.Text>
            </div>
          )}
          <Card.Link
            onClick={() => this.operation(key)} // <-- pass key/index to toggle
            id="toto" href="#"
          >
            Learn more
          </Card.Link>
          <Card.Link href="#">Apply</Card.Link>
        </Card.Body>
      </Card>
    </div>
  );
})}