Bagaimana untuk menetapkan ketinggian div dalam tindak balas

Cara menetapkan ketinggian div dalam tindak balas: 1. Laksanakan ketinggian div melalui css 2. Isytiharkan objek C dalam keadaan dan simpan gaya butang tukar dalam objek, kemudian dapatkan A dan set semula C Hanya klik; "marginTop" di dalamnya.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menetapkan ketinggian div sebagai tindak balas?

bertindak balas secara dinamik menetapkan ketinggian elemen

Gunakan tindak balas untuk melaksanakan mengubah suai gaya secara dinamik (kaedah ini tidak disyorkan melainkan tiada pilihan lain)

Seperti yang ditunjukkan di bawah:

Keperluan

Butang gantian dalam pelaksanaan rajah mengikut Di sudut kanan bawah imej, apabila ketinggian imej berubah, kedudukan butang tukar juga berubah.

Idea

1. Laksanakan melalui css (tiada penyelesaian buat masa ini)
2. Gunakan ciri paparan dipacu data tindak balas
2.1 Data: isytiharkan satu dalam keadaan Objek C, yang menyimpan gaya butang perubahan.
2.2 Operasi: Biarkan A = ketinggian gambar, B = tukar ketinggian butang. Selepas imej dimuatkan, dapatkan A dan tetapkan marginTop dalam C sekali lagi. (Idea ini hanya perlu menukar data dan tidak perlu mempertimbangkan lapisan paparan)

Kod lengkap

bina

this.state = {
  updateBtnStyle :{
    fontSize: "12px",marginLeft:'20px',marginTop:'300px',
  }
}
//在class中定义的函数，如果需要使用到全局this，需要此操作
this.loading = this.loading.bind(this)

mengisytiharkan pemuatan fungsi operasi

loading(){
    const imgHeight =  document.getElementById('facePhoto').height
    console.log('图片的高度',document.getElementById('facePhoto')?.height)
    if(imgHeight === Number.parseInt(this.state.updateBtnStyle.marginTop)+24) return
    else{
      this.setState({
        updateBtnStyle:{
          marginTop:document.getElementById('facePhoto')?.height-24+'px'
        }
      })
    }
}

Lihat pseudokod lapisan

<Item label="人脸照片" style={{ position: "relative" }} required>
    <img id={&#39;facePhoto&#39;} src={photo} alt=""  width="300" onLoad={this.loading} style={{float:&#39;left&#39;}}/>
    <Button size="small" style={updateBtnStyle}
      onClick={() => StateManage.set(updatePhotoProps, { visible: true })}>更换</Button>
 </Item>

Masalah yang dihadapi dalam proses

1. Dapatkan ketinggian imej:
1.1 Masa perolehan: Anda perlu menunggu untuk imej yang akan dimuatkan untuk mendapatkan ketinggiannya adalah berkesan, jadi anda perlu menggunakan acara onLoad img untuk memastikan bahawa imej telah dimuatkan apabila ketinggian imej diperolehi.
1.2 Cara mendapatkannya: Lebar dan tinggi imej ditetapkan melalui ketinggian dan lebar atribut, bukan melalui gaya, jadi kaedah untuk mendapatkan ketinggian = document.getElementById('xxx').height
2. Fungsi yang diisytiharkan tidak Mengikat ini menjadikannya mustahil untuk menggunakan setState

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian div dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!