如何在点击时隐藏另一个 div？在反应 js 中一次只能显示单个 div答案

【问题标题】：How to hide another divs on click? only single div should be show at a time in react js如何在点击时隐藏另一个 div？在反应 js 中一次只能显示单个 div
【发布时间】：2020-06-21 16:47:53
【问题描述】：

我有四个 divs 我想一次只显示一个 div。

现在 div 根据匹配的按钮显示 onClick 但我想在单击按钮时仅显示相对 div 应隐藏其他 div。我该怎么做？

我尝试了什么：_

 constructor(){
        super();
        this.state={
            firstDiv:false,
            secondDiv:false,
            thirdDiv:false,
            fourthDiv:false,
        }
    }
    
    
 render(){
        return(
            <div>
            
<ul>
<li onClick={()=>{this.setState({firstDiv:true})}}>First Btn</li>
<li onClick={()=>{this.setState({secondDiv:true})}}>Second Btn</li>
<li onClick={()=>{this.setState({thirdDiv:true})}}>Third Btn</li>
<li onClick={()=>{this.setState({fourthDiv:true})}}>Fourth Btn</li>
</ul>
            

{
    this.state.firstDiv ?
    <div>first Div</div>
:null        
}

{
    this.state.secondDiv ?
    <div>second Div</div>
:null        
}

{
    this.state.thirdDiv ?
    <div>third Div</div>
:null        
}

{
    this.state.fourthDiv ?
    <div>fourth Div</div>
:null        
}


            </div>
)
}

谢谢！

【问题讨论】：

而不是四个状态，只有一个决定显示哪个 div。另外，如果用户需要点击隐藏元素，他们将如何更改 div？

标签： reactjs jsx

【解决方案1】：

您可以初始化一个变量，该变量存储您想要显示的内容将其设置为您想要在单击 li 按钮时显示的 div 名称。

 constructor(){
        super();
        this.state={
           showDiv: null
        }
    }
    
    
 render(){
        return(
            <div>
            
<ul>
<li onClick={()=>{this.setState({showDiv:'first'})}}>First Btn</li>
<li onClick={()=>{this.setState({showDiv:'second'})}}>Second Btn</li>
<li onClick={()=>{this.setState({showDiv:'third'})}}>Third Btn</li>
<li onClick={()=>{this.setState({showDiv:'fourth'})}}>Fourth Btn</li>
</ul>
            

{
    this.state.showDiv==='first' ?
    <div>first Div</div>
:null        
}

{
   this.state.showDiv==='second'?
    <div>second Div</div>
:null        
}

{
    this.state.showDiv==='third'?
    <div>third Div</div>
:null        
}

{
    this.state.showDiv==='fourth'?
    <div>fourth Div</div>
:null        
}


            </div>
)
}

【讨论】：

非常感谢@vishnu sandhireddy，这正是我想要的，再次感谢它现在工作正常......

【解决方案2】：

你可以使用这样的东西。 Div 将根据数字呈现。

// Example class component
class ReactComponent extends React.Component {
  
  state = {
    visibleDiv: 0
  }
  switchVisibleDiv(divNumber) {
    this.setState({...this.state, visibleDiv: divNumber})
  }
  
  render() {
    return (
      <div>
        <ul>
          <li onClick={()=> this.switchVisibleDiv(1)}>set div 1</li>
          <li onClick={()=> this.switchVisibleDiv(2)}>set div 2</li>
          <li onClick={()=> this.switchVisibleDiv(3)}>set div 3</li>
          <li onClick={()=> this.switchVisibleDiv(4)}>set div 4</li>
        </ul>
        {this.state.visibleDiv === 1 ? <div>Div 1</div> : ''}
        {this.state.visibleDiv === 2 ? <div>Div 2</div> : ''}
        {this.state.visibleDiv === 3 ? <div>Div 3</div> : ''}
        {this.state.visibleDiv === 4 ? <div>Div 4</div> : ''}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <ReactComponent />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：