通常 刪除（隱藏）和增加（顯示） 很多人用css的display的none樣式來實現(xiàn) 這樣有個缺點(diǎn)F12直接改樣式就可以，非常不安全 我們應(yīng)該實現(xiàn)真正的刪除和增加 但是在react看來也可以叫渲染和不渲染這個組件這個dom
react有removeChild方法 但是沒有appendChild方法 so我們就只能通過render 結(jié)合state方法來更新頁面了
也就是利用render生命周期來定義一個變量 DOM節(jié)點(diǎn)變量
然后通過state來更新是否顯示的值
import 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)
}
//恢復(fù)
onClick(){
this.setState({
deled:true
})
}
//刪除
onClickS(){
this.setState({
deled:false
})
}
render() {
const { deled} = this.state;
var showMap='';
//三元表達(dá)式判斷deled的值來更新showMap
deled==true?showMap=<img src={require('../image/joinwechat/s.png')}></img>:showMap=''//這是一張二維碼圖
return (
< >
<button onClick={this.onClickS}>點(diǎn)我刪除二維碼</button>
<button onClick={this.onClick}>點(diǎn)我恢復(fù)二維碼</button>
{showMap}
</>
)
}
}
export default Page2;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
