隐藏/显示单击另一个 div

Question

我想在单击按钮时隐藏/显示元素列表，但它不会隐藏它们，并且“shouldHide”的console.log等于未定义。

功能

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


    const { shouldHide} = this.props;

我想隐藏的div

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

这是与我要隐藏的 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 };
  }

你的 showhide 可能应该这样做，否则它不会切换并且永远是 true

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

const { shouldHide} = this.props; 在您的渲染区域中应该是const { shouldHide} = this.state

但<div className={this.state.shouldHide ? 'hidden' : ''} > 应该也能正常工作，因为它位于正确的区域。