我怎样才能通过地图功能只打开一个模态
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
我正在尝试为唱片公司制作一个子页面,我需要在卡片上显示所有艺术家,然后在模式中显示他们的完整个人资料,每当我尝试打开模式时,所有这些都会打开和关闭我单击卡片按钮,我尝试使用状态组件创建构造函数(道具),但无法使状态接收艺术家的密钥 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