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

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

1 个答案: