我怎样才能通过地图功能只打开一个模态

How can i open just one modal through a map function

我正在尝试为唱片公司制作一个子页面,我需要在卡片上显示所有艺术家,然后在模式中显示他们的完整个人资料,每当我尝试打开模式时,所有这些都会打开和关闭我单击卡片按钮,我尝试使用状态组件创建构造函数(道具),但无法使状态接收艺术家的密钥 ID。我已经尝试了数周尝试将其他示例改编为我自己的代码但没有结果,非常感谢您抽出宝贵时间!

import React, {useState, setShow, Component} from 'react';
import {CardDeck, Navbar, NavLink, Col, Row, Image, Container, Card, CardImg, CardBody, CardText } from 'react-bootstrap';
import Button from 'react-bootstrap/Button'; 
import Modal from 'react-bootstrap/Modal';

const Artistas = [ {id:1,
img:require("../assets/images/artists-01.jpg"), 
title: 'Artist 1', 
content: 'Lorem Ipsum',
    musica:"https://open.spotify.com/embed/artist/1wA3nwZy9EriceVVQlEmEx",
    genres:["Punk ", "Rock"]},
  
    {id: 2, 
img:require("../assets/images/artists-04.jpg"), 
title: "Artist 2", 
content: 'lorem ipsum',
    musica:"https://open.spotify.com/embed/artist/1wA3nwZy9EriceVVQlEmEx"},
   ];


function ArtistsPage() {
  
    
const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

const Artistxs = Artistas.map(artist => 
<div>
<Card key={artist.id}>
  <Card.Img variant="top" src={artist.img} />
  <Card.Body>
  <Button onClick={handleShow}>{artist.title}</Button>
 <Card.Text>
  </Card.Text> 
  </Card.Body>
</Card>
<>
<Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
        centered
        size="lg"
      >
        <Modal.Header closeButton>
          <Modal.Title>{artist.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body className="row">
        <div class="col-md-8">
        <Image src={artist.img} />
  </div>
  <div class="col-md-4">
    <p>{artist.content}</p>
  </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose} >
            Close
          </Button>
        </Modal.Footer>
      </Modal>
</>
</div>
 )


  return(
    <div>
      <Container className="container">
<Row className="row">
  <Col className="">{Artistxs}
</Col>
</Row>
</Container>
</div>
  );

}



export default ArtistsPage; 

您只需要 1 个 Modal。因此,您可以将 Modal 移出您的地图。

然后,您需要弄清楚如何在 Modal 中指明要显示的艺术家。

一种方法是通过 artist.id:

<Button onClick={handleShow(artist.id)}>{artist.title}</Button>

但是现在handleShow需要return一个函数:

const handleShow = (artistId) => () => setShow(artistId);

我还将 show 更改为艺术家 ID 而不是布尔值。 (这假设艺术家 ID 目前不会为零)

进入 Modal 后,您需要找到所选艺术家:

Artistxs.find(artist => artist.id === artistId);

这应该让你继续。

您可以为Modal创建单独的组件,并通过Props传递对象来显示相关信息和处理模态事件。

在下面的例子中,没有切换实际的模式,但你可以使用道具来切换它。

function ArtistAddtionalInfo(props) {
  return (
  // Modal can be here with details in artistInfo and other props 
  <div className="modal_dummy"> 
    Below Props can be used to handle actual model popup 
    <h1> Hello, { props.artistInfo.title }</h1>
    <div>{ props.artistInfo.id }</div>
    <div>{ props.artistInfo.img }</div>
    <div>{ props.artistInfo.content }</div>
    <div>showModel: {props.showModel ? 'true' : 'false'}</div>
    <button onClick = {() => props.handleModalClose()} > close </button>
  </div>
  
  )
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        items: [ {id:1,
img:"../assets/images/artists-01.jpg", 
title: 'Artist 1', 
content: 'Lorem Ipsum',
    musica:"https://open.spotify.com/embed/artist/1wA3nwZy9EriceVVQlEmEx",
    genres:["Punk ", "Rock"]},
  
    {id: 2, 
img:"../assets/images/artists-04.jpg", 
title: "Artist 2", 
content: 'lorem ipsum',
    musica:"https://open.spotify.com/embed/artist/1wA3nwZy9EriceVVQlEmEx"},
   ],
   artistInfo:  {},
   isShowModel: false
    }
  }
  
handleShow = (artist) =>{
     this.setState({
         artistInfo:artist,
       isShowModel: true
     });
  }
  
handleOnhide = () =>{
     this.setState({
         isShowModel: false
     });
}

render() {
    return (
      <div className="container">
        <div className="row">
            <div className="">
                { 
                this.state.items.map(artist => 
                   <div className="card" key={artist.id}>
                    <img className="card_image" src={artist.img} />
                    <div className="card_body">
                        <button onClick={ () => { this.handleShow(artist)}}> {artist.title} </button>
                        <div className="card_text">
                        </div> 
                    </div>
                  </div>
             )
            } 
          </div>
        </div>
        {
        this.state.isShowModel &&
        <ArtistAddtionalInfo 
          artistInfo = { this.state.artistInfo }
          showModel = {this.state.isShowModel}
          handleModalClose = {() => {this.handleOnhide()}}
        />
        }
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

JSFiddle see it in action