如何创建一个在反应时切换打开模式的按钮

Question

我正在重建一个静态网站，该网站在卡片上显示电影，点击这些卡片后，会出现相应的电影模式，就像在我的静态网站 https://movie-list-website-wt.netlify.app/ 中一样，但我似乎无法理解如何使按钮和功能在反应中打开模态

import React from "react";

const IMG_URL = 'https://image.tmdb.org/t/p/w500';

function getColor(vote) {
    if(vote >= 8){
        return 'green'
    }else if (vote >= 5){
        return 'orange'
    }else{
        return 'red'
    }
}

function Movies ({title, id, poster_path, overview, vote_average, release_date}) {
    return (
    <div className="movie-modal-container">
        <div className="movie">
            <button id={`myBtn${id}`} className="myBtn">
                <img src={IMG_URL+poster_path} alt={title}/>
                <div className="movie-info">
                    <h3>{title}</h3>
                    <span className={getColor(vote_average)}>{vote_average}</span>
                </div>
                <div className="overview">
                    <div className="overview-header">
                        <h3>Overview</h3>
                        <div className="addBtn">
                            <i class="fas fa-plus"></i>
                        </div>
                    </div>
                    <p>{overview}</p>
                </div>
            </button>
        </div>
        <div className="modal" id={`myModal${id}`}>
            <div className="modal-content">
                <span id={"close"+id}><i class="fas fa-times"></i></span>
                <div className="modal-poster">
                    <img src={IMG_URL+poster_path} alt={title}/>
                </div>
                <div className="modal-info">
                    <h2>{title}</h2>
                    <span>{vote_average}/10</span>
                    <h3 className="releasedate">Release Date</h3>
                    <p>{release_date}</p>
                    <h3>Overview</h3>
                    <p className="modal-overview">{overview}</p>
                </div>
            </div>
        </div>
    </div>
    );
}

export default Movies;

我想要的行为是当我点击已经包装为按钮的卡片时，会出现相应的电影模式

Answer 1

您可以定义一个状态来处理模态显示/隐藏，并使用条件渲染来呈现 - 隐藏模态。

尝试像这样更改您的代码：

import { useState } from 'react';

function Movies({
  title,
  id,
  poster_path,
  overview,
  vote_average,
  release_date,
}) {
  // Define state
  const [isModalOpen, setIsModalOpen] = useState(false);

  // Define function that will open the modal
  const handleOpen = () => {
    setIsModalOpen(true);
  };

  // Define function that will close the modal
  const handleClose = () => {
    setIsModalOpen(false);
  };

  return (
    <div className='movie-modal-container'>
      <div className='movie'>
        <!-- Open the modal on button click -->
        <button id={`myBtn${id}`} className='myBtn' onClick={handleOpen}>
          <img src={IMG_URL + poster_path} alt={title} />
          <div className='movie-info'>
            <h3>{title}</h3>
            <span className={getColor(vote_average)}>{vote_average}</span>
          </div>
          <div className='overview'>
            <div className='overview-header'>
              <h3>Overview</h3>
              <div className='addBtn'>
                <i class='fas fa-plus'></i>
              </div>
            </div>
            <p>{overview}</p>
          </div>
        </button>
      </div>
      <!-- Use conditional rendering to show - hide the modal -->
      <div className={`modal ${isModalOpen ? 'open' : ''}`} id={`myModal${id}`}>
        <div className='modal-content'>
          <!-- Close the modal on button click -->
          <span id={'close' + id} onClick={handleClose}>
            <i class='fas fa-times'></i>
          </span>
          <div className='modal-poster'>
            <img src={IMG_URL + poster_path} alt={title} />
          </div>
          <div className='modal-info'>
            <h2>{title}</h2>
            <span>{vote_average}/10</span>
            <h3 className='releasedate'>Release Date</h3>
            <p>{release_date}</p>
            <h3>Overview</h3>
            <p className='modal-overview'>{overview}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Movies;