React - 子コンポーネントの状態を変更する

Question

別のコンポーネントで自分の状態を変更しようとしています。私は要素をクリックしたときの状態を変更したい私のMobileContentコンポーネントで小道具

constructor(props) { 
    super(props); 

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

     this.state = { 
      isOpen: false 
     }; 
    } 

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

によって状態が合格しています。

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; 

ありがとうございました！

Answer 1

子コンポーネントが親に通知するようにするには、関数である子に追加の小道具を渡す必要があります。子供はそれを呼び出すことができます。だから、親で：

constructor(props) { 
    super(props); 

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

    this.state = { 
     isOpen: false 
    }; 
} 

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

と子で：

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; 
    }