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

Posted 2023-02-22

【中文标题】如何创建一个在反应时切换打开模式的按钮

【英文标题】：How to create a button that toggles open modal on react

【发布时间】：2021-12-22 04:07:34

【问题描述】：

我正在重建一个静态网站，该网站在卡片上显示电影，点击这些卡片后，会出现相应的电影模式，就像在我的静态网站 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;

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

【问题讨论】：

你能创建一个codesandbox吗？

在按钮中使用onClick并传递一个函数来接收id并使用相应的逻辑，我在你的静态页面中看到是通过改变显示来完成的。

@Woohaik 你能告诉我这是怎么做的吗？我试着自己做，但它似乎不起作用

@lost_in_magento codesandbox.io/s/gracious-mclean-cbs8g

codesandbox.io/s/hungry-lumiere-90d3p?file=/src/App.js我已经改变了基本骨架单独移动了模态处理

【参考方案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;

【讨论】：

在添加条件渲染后isModalOpen &&这就像一个魅力，谢谢你好先生！