javascript - 隐藏/显示单击另一个div

我想在单击按钮时隐藏/显示元素列表，但不会隐藏它们，并且“ 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
};

最佳答案

您的构造函数应如下所示：

  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' : ''} >在正确的区域也应该可以正常工作。