Reagieren - Status in der untergeordneten Komponente ändern

Question

Ich versuche, meinen Status in einer anderen Komponente zu ändern. Ich habe den Zustand von Requisiten bestanden

constructor(props) { 
    super(props); 

     this.handleClick = this.handleClick.bind(this); 

     this.state = { 
      isOpen: false 
     }; 
    } 

<MobileContent isOpen={this.state.isOpen} /> 

In meiner MobileContent Komponente möchte ich den Zustand ändern, wenn ich auf das Element klicken.

class MobileContent extends Component { 

    render() { 
    if (this.props.isOpen) { 
     return (
      <Grid fluid> 
       <div className="mobileContent"> 
       <Row center="xs"> 
        <Col xs={12}> 
        <span className="button">Hello, world!</span> 
        <span className="close" onClick={this.handleClick} >X</span>    
        </Col>     
       </Row> 
       </div> 
      </Grid> 
     ); 
    } 
    return null; 
    } 
} 

export default MobileContent; 

Danke für die Hilfe !!

Answer 1

Wenn Sie möchten, dass die untergeordnete Komponente das übergeordnete Element benachrichtigt, sollten Sie dem untergeordneten Element, das eine Funktion ist, eine zusätzliche Unterstützung übergeben. Das Kind kann das dann anrufen. So in der Mutter:

constructor(props) { 
    super(props); 

    this.handleClick = this.handleClick.bind(this); 

    this.state = { 
     isOpen: false 
    }; 
} 

<MobileContent isOpen={this.state.isOpen} onClose={this.handleClick}/> 

Und im Kind:

render() { 
    if (this.props.isOpen) { 
     return (
      <Grid fluid> 
       <div className="mobileContent"> 
       <Row center="xs"> 
        <Col xs={12}> 
        <span className="button">Hello, world!</span> 
        <span className="close" onClick={this.props.onClose}>X</span>    
        </Col>     
       </Row> 
       </div> 
      </Grid> 
     ); 
    } 
    return null; 
    }