如何創建一個在反應時切換打開模式的按鈕

我正在重建一個靜態網站作為反應，該網站在卡片上顯示電影，點擊這些卡片后，會出現相應的電影模式，就像在我的靜態網站中一樣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;

我想要的行為是當我點擊已經包裝為按鈕的卡片時，會出現相應的電影模式

uj5u.com熱心網友回復：

您可以定義一個狀態來處理模態顯示/隱藏，并使用條件渲染來渲染-隱藏模態。

嘗試像這樣更改您的代碼：

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;

標籤：javascript html css 反应 按钮

上一篇：javascript中可以被3整除的數字

下一篇：如何遍歷物件陣列并根據JavaScript中的條件添加新的物件鍵？