Блог

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

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

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

Вот мой текущий код: (Он просто скрывает нажатую кнопку)

     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;
  

Вот схема того, как вы можете скрыть кнопки и показать соответствующий компонент, указав только один 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')
);