隐藏/显示点击另一个div

Question

我想隐藏/显示元素列表，当我点击按钮但它不会隐藏它们和console.log的＆＃34; shouldHide＆＃34;等于未定义。

功能

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可能应该这样做，否则它不会切换并且永远是真的

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

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

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