반응 모달 내에서 부모 상태 업데이트

Question

부모의 상태에 따라 react-modal 안에 간단한 메시지를 표시하려고합니다. 간단하게하기 위해 클릭하면 부모의 상태가 변경되는 Modal 버튼이 있습니다. 그런 다음 Modal에 메시지를 표시해야하지만 모달을 닫았다가 다시 열어야 만 해당 메시지가 표시됩니다.

다음은 코드 다운 된 버전입니다. 모달이 재개 된 후

var Modal = require('react-modal'); 

var SomeComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     showMsg: false, 
     modalOpen: false 
    } 
    }, 
    showMessage: function() { 
    this.state.showMsg = true; 
    }, 
    showModal: function() { 
    this.state.modalOpen = true; 
    } 

    render: function() { 
    return (
     <div> 
     <button onClick={this.showModal}>Show modal</button> 
     <Modal isOpen={this.state.modalOpen}> 
      <button onClick={this.showMessage}>Show message</button> 
      { 
      this.state.showMsg ? 
       "This is the message" 
      : 
       null 
      } 
     </Modal> 
     </div> 
    ) 
    } 
}); 

This is the message에만 표시됩니다,하지만 난이 열려있는 동안이 보여주고 싶은.

Answer 1

모달을 열어도 모달을 표시하려면 this.setState()을 사용하여 상태를 설정하십시오. 그것은 당신에게 상태를 바꿀 것이고 반응 성분의 재 렌더링을 시작할 것입니다.

var Modal = require('react-modal'); 

var SomeComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     showMsg: false, 
     modalOpen: false 
    } 
    }, 
    showMessage: function() { 
    this.setState({showMsg: true}); 
    }, 
    showModal: function() { 
    this.setState({modalOpen: true}); 
    } 

    render: function() { 
    return (
     <div> 
     <button onClick={this.showModal}>Show modal</button> 
     <Modal isOpen={this.state.modalOpen}> 
      <button onClick={this.showMessage}>Show message</button> 
      { 
      this.state.showMsg ? 
       "This is the message" 
      : 
       null 
      } 
     </Modal> 
     </div> 
    ) 
    } 
});