第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何只打開特定的模態(tài)窗口?

如何只打開特定的模態(tài)窗口?

牛魔王的故事 2023-08-18 10:18:42
我只需要打開我單擊的模態(tài) div。但是當(dāng)我單擊任何元素時(shí)它們都會(huì)打開。如何使其僅進(jìn)入我點(diǎn)擊的模式?應(yīng)用程序.jsimport { useEffect, useState } from "react";import Modal from "./components/Modal";import "./style.css";function App() {  useEffect(() => {    fetch(      "https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0"    )      .then((res) => res.json())      .then((result) => setItem(result));  }, []);  const [item, setItem] = useState([]);  const [modalActive, setModalActive] = useState(false);  return (    <div className="app">      {item.map((item) => (        <div          className="image-container"          key={item.id}          onClick={() => setModalActive(true)}        >          <img className="image" src={item.urls.regular} alt="logo" />          <div className="info">            <img              className="avatar"              src={item.user.profile_image.small}              alt="avatar"            />            <div className="text">              <p className="name">{item.user.username}</p>              <p className="name">{item.alt_description}</p>            </div>          </div>          <Modal            active={modalActive}            setActive={setModalActive}            url={item.urls.regular}          />        </div>      ))}    </div>  );}export default App;模態(tài).jsximport React from "react";import "./index.css";const Modal = ({ setActive, active, url }) => {  return (    <div      className={active ? "modal active" : "modal"}      onClick={() => setActive(false)}    >      <div className="modal__img">        <img src={url}/>      </div>    </div>  );};export default Modal;
查看完整描述

1 回答

?
慕碼人8056858

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個(gè)贊

其他解決方案是使用索引來顯示或隱藏模式:


 <div className="app">

      {item.map((item, index) => (

        <div

          className="image-container"

          key={item.id}

          onClick={() => setModalActive(index)}

        >

          <img className="image" src={item.urls.regular} alt="logo" />

          <div className="info">

            <img

              className="avatar"

              src={item.user.profile_image.small}

              alt="avatar"

            />

            <div className="text">

              <p className="name">{item.user.username}</p>

              <p className="name">{item.alt_description}</p>

            </div>

          </div>

          <Modal

            active={modalActive === index}

            setActive={setModalActive}

            url={item.urls.regular}

          />

        </div>

      ))}

    </div>


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)