隱藏/顯示點擊另一個div

Question

我想隱藏/顯示元素列表，當我點擊按鈕，但它不會隱藏它們，並且「shouldHide」的console.log等於undefined。

功能

showHideToggle(){ 
    this.setState({shouldHide: true}); 
} 


    const { shouldHide} = this.props; 

股利我想隱藏

 <div className={shouldHide ? 'hidden' : ''} > 
     <WeatherInfo /> 
    </div>; 

這是從一個單獨的我試圖隱藏DIV

<div onClick={(e) => {this.List(e);this.showHideToggle}}></div> 

構造

this.state = { 
    shouldHide: true 
}; 

Answer 1

你的構造應該是這樣的：

constructor(props) { 
    super(props); 
    this.state = { shouldHide: true }; 
    } 

和您的顯示隱藏也許應該這樣做，而不是否則將無法切換，並且將永遠是真正的

showHideToggle(){ 
    this.setState({shouldHide: this.state.shouldHide ? false : true}); 
} 

const { shouldHide} = this.props;應該是在渲染const { shouldHide} = this.state區域

但<div className={this.state.shouldHide ? 'hidden' : ''} >應該工作以及它在正確的區域。