Как скрыть родительский div и заменить его на другой div, когда пользователь нажимает кнопку, являющуюся дочерним элементом родительского div?

Question

У меня есть компонент, который имеет кнопки, когда пользователь нажимает на одну из кнопок, я хотел бы скрыть весь компонент и заменить его другим компонентом.

Я смог скрыть нажатую кнопку, но не смог скрыть весь родительский компонент при нажатии на кнопку (кнопка).

Что было бы лучшим подходом к выполнению того, что я хочу сделать?

Вот мой текущий код: (Это просто Hidding прессованной кнопки)

const ParentComponentStyle = { 
     width:300, 
     height:60, 
     backgroundColor:"#343458" 
    }; 

    class ParentCompnent extends React.Component { 

    constructor(props){ 
     super(props) 
      this.state = { 
       buttonPressed:false, 
       opacity:1 
     } 
     this.handleClick = this.handleClick.bind(this); 
     } 


     handleClick(evt) { 
     this.setState({ 
      buttonPressed: !this.state.buttonPressed, 
      opacity: 0, 
     }) 
    } 

    render(){ 
     return(
     <div className="DivToHide" style={ParentComponentStyle}> 
      <div onClick={this.handleClick} style={{float:'left'}}>{this.props.children[0]}</div> 
      <div onClick={this.handleClick} style={{float:"right", opacity: this.state.opacity}}>{this.props.children[1]}</div> 
     </div> 


     ); 
    } 
} 



export default ParentComponent; 

А вот компонент, который я хочу показать, как только другой было скрыт:

const ShowThisDivStyle = { 
     width:300, 
     height:200, 
     backgroundColor:"#343458" 
    }; 

    var ShowThisDiv = React.createClass({ 
    render: function(){ 
     return(
     <div style={ShowThisDivStyle}> 
      <div style={{float:'left'}}>{this.props.children[0]}</div> 
      <p style={{float:"left", color:"white",marginTop: "7px"}}>{this.props.children[1]}</p> 
      <div style={{float:"right"}}>{this.props.children[2]}</div> 
      <p style={{float:"right",color:"darkGray",paddingRight: "46px", marginTop: "0",fontSize:'12px', marginBottom:"0px"}}>{this.props.children[3]}</p> 
      <div style={{textAlign:"center"}}>{this.props.children[4]}</div> 
    </div> 


    ); 
    } 
}); 

export default ShowThisDiv; 

Answer 1

Ниже приведен обзор того, как можно скрыть кнопки и показать соответствующий компонент при указании только одного метода handleClick: http://codepen.io/PiotrBerebecki/pen/BLGmvd

const ParentComponentStyle = { 
     width:300, 
     height:60, 
     backgroundColor:"#343458" 
}; 


class ParentCompnent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     buttonPressedA: false, 
     buttonPressedB: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(evt) { 
    this.setState({ 
     [`buttonPressed${evt.target.id}`]: !this.state[`buttonPressed${evt.target.id}`] 
    }); 
    } 

    render() { 
    let renderContent; 

    if (this.state.buttonPressedA) { 
     renderContent = (
     <DivA> 
      <p>Child 0A</p> 
      <p>Child 1A</p> 
      <p>Child 2A</p> 
      <p>Child 3A</p> 
      <p>Child 4A</p> 
     </DivA> 
    ); 
    } else if (this.state.buttonPressedB) { 
     renderContent = (
     <DivB> 
      <p>Child 0B</p> 
      <p>Child 1B</p> 
      <p>Child 2B</p> 
      <p>Child 3B</p> 
      <p>Child 4B</p> 
     </DivB> 
    ); 

    } else { 
     renderContent = (
     <div className="DivToHide" style={ParentComponentStyle}> 
      <button onClick={this.handleClick} id="A"> 
      Replace me with DivA 
      </button> 
      <button onClick={this.handleClick} id="B"> 
      Replace me with DivB 
      </button> 
     </div> 
    ); 
    } 

    return(
     <div> 
     {renderContent} 
     </div> 
    ); 
    } 
} 


const DivStyleA = { 
    width:300, 
    height:200, 
    backgroundColor:"green" 
}; 

const DivA = React.createClass({ 
    render: function() { 
    return(
     <div style={DivStyleA}> 
     DivA 
     <div style={{float:'left'}}>{this.props.children[0]}</div> 
     <p style={{float:"left", color:"white",marginTop: "7px"}}>{this.props.children[1]}</p> 
     <div style={{float:"right"}}>{this.props.children[2]}</div> 
     <p style={{float:"right",color:"darkGray",paddingRight: "46px", marginTop: "0",fontSize:'12px', marginBottom:"0px"}}>{this.props.children[3]}</p> 
     <div style={{textAlign:"center"}}>{this.props.children[4]}</div> 
     </div> 
    ); 
    } 
}); 


const DivStyleB = { 
    width:300, 
    height:200, 
    backgroundColor:"red" 
}; 

const DivB = React.createClass({ 
    render: function() { 
    return(
     <div style={DivStyleB}> 
     DivB 
     <div style={{float:'left'}}>{this.props.children[0]}</div> 
     <p style={{float:"left", color:"white",marginTop: "7px"}}>{this.props.children[1]}</p> 
     <div style={{float:"right"}}>{this.props.children[2]}</div> 
     <p style={{float:"right",color:"darkGray",paddingRight: "46px", marginTop: "0",fontSize:'12px', marginBottom:"0px"}}>{this.props.children[3]}</p> 
     <div style={{textAlign:"center"}}>{this.props.children[4]}</div> 
     </div> 
    ); 
    } 
}); 


ReactDOM.render(
    <ParentCompnent />, 
    document.getElementById('app') 
);