Nextjs memberikan div baharu pada klik

Question

Saya mempunyai imej dan saya mahu mencipta div baharu (dengan klik) dengan versi yang lebih besar daripada imej yang sama.

Saya mencuba empat kaedah:

1. Render div pada klik

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    
    return (
      <div className='w-screen h-screen fixed flex justify-center items-center'>
        <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
          <Image src={src} fill={true} />
        </div>
      </div>
    )
  }

...

<Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img}/>

2. Komponen tersuai

function Glasses ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      return (
        <div className='w-screen h-screen fixed flex justify-center items-center'>
          <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
            <Image src={src} fill={true} />
          </div>
        </div>
      )
    }
    return (
      <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
    )
  }


...

<Glasses src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />

3. Div sedia ada onClick padam kelas tersembunyi

function Glasses2 ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      let x = document.getElementById('temp');
      x.classList.remove('hidden');
      x.classList.add('flex');
    }
    return (
      <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
    )
  }


...

<Glasses2 src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />
<div id='temp' className='w-screen h-screen fixed hidden justify-center items-center'>
  <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
    <Image src={'/gafas.png'} fill={true} />
  </div>
</div>

4. Ini berfungsi tetapi saya kehilangan pengoptimuman imej nextjs

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    const new_cont = document.createElement('div');
    const new_div = document.createElement('div');
    const main = document.getElementById('main');
    new_cont.classList.add('w-screen', 'h-screen', 'fixed', 'flex', 'justify-center', 'items-center');
    new_div.classList.add('w-9/12', 'h-5/6', 'bg-slate-200', 'opacity-50');
    // add img tag here
    new_cont.appendChild(new_div);
    main.appendChild(new_cont);
  }


...

<Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img} />

Dalam setiap kaedah saya boleh melihat log dalam konsol, tetapi hanya dalam kaedah 4 saya boleh melihat div baharu.

Adakah kaedah 4 satu-satunya cara yang betul? Saya lebih suka menggunakan komponen imej jika boleh. Apa pendapat kamu?

Answer 1

Terima kasih banyak @Atena Dadkhah. Jawapan anda sangat sah.

Dalam projek, tidak ada satu tetapi sekumpulan imej, jadi kod akhir kelihatan seperti ini:

function enlarge(e) {
    setLrg(true);
    let img = document.getElementById('largerImage'),
        src = e.target['data-loaded-src'];
    img['src'] = src;
  }

Kemudian sekumpulan imej seperti ini:

Kemudian div tersembunyi:

Ia masih kekurangan kelakuan menutup div, tetapi ini sepatutnya mudah untuk ditambah.

Sekali lagi. Terima kasih :)

Answer 2

Anda boleh mencuba sesuatu seperti ini:

Set cangkuk:

[zoomImage, setZoomImage] = useState(false)

 setZoomImage(true)}/>

// zoomed image


   

Dalam kod ini, anda pada asasnya memberitahu Next.JS untuk menukar pembolehubah zoomImage kepada benar setiap kali pengguna mengklik pada imej, jadi imej yang lebih besar yang disembunyikan secara lalai akan mempunyai blok paparan. (Saya rasa anda menggunakan tailwindcss)