隐藏/显示点击另一个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' : ''} >应该工作以及它在正确的区域。