当用户单击作为父 div 的子元素的按钮时，如何隐藏父 div 并将其替换为另一个 div？

Question

我有一个必须按钮的组件，当用户单击其中一个按钮时，我想隐藏整个组件并将其替换为另一个组件。

我能够隐藏单击的按钮，但在单击子（按钮）时无法隐藏整个父组件。

什么是做我想做的最好的方法？

这是我当前的代码：（它只是隐藏了按下的按钮）

    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')
);