如何在 React 中动态显示我的数据 onclick 事件答案

【问题标题】：How can I display my data dynamically onclick event in React如何在 React 中动态显示我的数据 onclick 事件
【发布时间】：2021-10-06 01:15:34
【问题描述】：

我正在使用 React 和 Redux 创建一个电影应用程序，在每张电影卡中我都有一些关于电影的信息，例如标题、图像和一个按钮（买票）。这个想法是，当我点击每张卡片的按钮时，我想获得卡片的相同图像和标题，并将其显示在另一张卡片的同一页面上，这样用户就可以选择数量并继续。

如何在点击时从电影卡中获取数据并将其转换为另一张卡作为弹出窗口？

你怎么看

单个电影卡组件

const SingleMovieCard = ({ id, title, poster_path, overview, toggleHandler }) => {
    const [selected, isSelected] = useState(null);

    return (
        <article key={id} className="card">
            <div key={id} onMouseEnter={() => isSelected(id)} onMouseLeave={() => isSelected(null)}>
                <img src={`${ImgPath}` + poster_path} alt={title} className="image" />
                {selected === id && <video src="./Trailers/SpaceJam.mp4" autoPlay={true} loop muted />}
            </div>
            <div className="body-card">
                <h1>{title}</h1>
                <p>{`${overview.substring(0, 200)}...`}</p>
            </div>
            <div className="services">
                <FiShare2 className="icon" />
                <FiHeart className="icon" />
                <div className="btn-icon-container">
                    <BiShoppingBag className="btn-icon" />
                    <button onClick={() => toggleHandler()}>Buy Ticket</button>
                </div>
            </div>
        </article>
    )
}


export default SingleMovieCard;

弹出式电影卡

const PopUpMovie = ({showClass, toggleHandler}) => {

    const moviesList = useSelector((state)=> state.allMovies.movies);
    return (
    <div className={`pop-up-container ${showClass}`}>
       <nav className="pop-up">
           <GrClose className="pop-up-close" onClick={()=> toggleHandler()}/>
           <div className="product-details">
               <div className="img-container">
                   <img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
               </div>
               <div className="product info">
                   <h1 className="title">Free Guy movie</h1>
                   <div className="quantity">
                       <h4>Quantity</h4>
                       <span>4</span>
                   </div>
                   <h5 className="prix">11$</h5>
                   <button className="btn-checkout">Continue to checkout</button> 
               </div>
           </div>
       </nav>}
    </div>
    )
}

export default PopUpMovie;

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以使用react-bootstrap中的模态

例子：

import { Modal } from "react-bootstrap";
const PopUpMovie = ({ showClass, toggleHandler }) => {

const modalContent = (
    <div className={`pop-up-container ${showClass}`}>
        <nav className="pop-up">
            <GrClose className="pop-up-close" onClick={() => toggleHandler()} />
            <div className="product-details">
                <div className="img-container">
                    <img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
                </div>
                <div className="product info">
                    <h1 className="title">Free Guy movie</h1>
                    <div className="quantity">
                        <h4>Quantity</h4>
                        <span>4</span>
                    </div>
                    <h5 className="prix">11$</h5>
                    <button className="btn-checkout">Continue to checkout</button>
                </div>
            </div>
        </nav>
    </div>
)

const moviesList = useSelector((state) => state.allMovies.movies);
return (
    <Modal
        id="order-modal-close"
        backdrop="static"
        show={showClass}
        size={"md"}
        dialogClassName="modal-90w"
        onHide={toggleHandler}
    >
        <Modal.Header closeButton>
            <Modal.Title>Movie</Modal.Title>
        </Modal.Header>
        <Modal.Body >{modalContent}</Modal.Body>
        {modalFooter}
    </Modal>
)
}

【讨论】：