Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk memadam elemen dom dalam tindak balas
Cara memadamkan elemen dom dalam tindak balas: 1. Gunakan kitaran hayat pemaparan untuk menentukan pembolehubah nod DOM 2. Padamkan elemen dom melalui "onClickS(){this.setState({deled:false})} "Itu sahaja.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Bagaimana untuk memadamkan elemen dom dalam tindak balas?
tindak balas pemadaman (sembunyikan) dan tambah (tunjukkan) unsur nod DOM
Biasanya padam (sembunyikan) dan tambah (tunjukkan) ramai orang menggunakan tiada gaya paparan css untuk mencapai ini Terdapat kelemahan. F12 hanya boleh menukar gaya secara langsung Ia adalah sangat tidak selamat >react mempunyai kaedah removeChild tetapi tidak mempunyai Kaedah appendChild jadi kami hanya boleh mengemas kini halaman melalui pemaparan digabungkan dengan kaedah keadaan
Iaitu, gunakan kitaran hayat render untuk mentakrifkan pembolehubah nod DOM yang berubah-ubah
dan kemudian gunakan keadaan untuk mengemas kini nilai sama ada untuk memaparkannyaPembelajaran yang disyorkan: "
tutorial video bertindak balasimport React from 'react'; class Page2 extends React.Component { constructor(props) { super(props); this.state={ deled:true } this.onClick=this.onClick.bind(this) this.onClickS=this.onClickS.bind(this) } //恢复 onClick(){ this.setState({ deled:true }) } //删除 onClickS(){ this.setState({ deled:false }) } render() { const { deled} = this.state; var showMap=''; //三元表达式判断deled的值来更新showMap deled==true?showMap=<img src={require('../image/joinwechat/s.png')}></img>:showMap=''//这是一张二维码图 return ( < > <button onClick={this.onClickS}>点我删除二维码</button> <button onClick={this.onClick}>点我恢复二维码</button> {showMap} </> ) } } export default Page2;"
Atas ialah kandungan terperinci Bagaimana untuk memadam elemen dom dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!