Reactjs 在react MODEL中更新父状态

我试图在

反应模式中显示一条简单消息，具体取决于家长的状态。为了简单起见，我在
模式中有一个按钮，它可以在单击时更改父级的状态。然后，它应该在
模式上显示一条消息，但在我关闭并重新打开模式之前，这不会发生

下面是代码的简化版本

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

var-Modal=require（'react-Modal'）；
var SomeComponent=React.createClass({
getInitialState:函数（）{
返回{
showMsg:false，
莫达洛彭：错
}
},
showMessage:函数（）{
this.state.showMsg=true；
},
showModal:function（）{
this.state.modalOpen=true；
}
渲染：函数（）{
返回(
显示模态
显示消息
{
这个.state.showMsg？
“这就是消息”
:
无效的
}
)
}
});

这是消息
仅在模式重新打开后显示，但我希望它在打开时显示。
为了使模式即使在模式打开时也能显示消息，请使用
this.setState（）
设置状态。它将改变您的状态并触发react组件的重新渲染

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

var-Modal=require（'react-Modal'）；
var SomeComponent=React.createClass({
getInitialState:函数（）{
返回{
showMsg:false，
莫达洛彭：错
}
},
showMessage:函数（）{
this.setState（{showMsg:true}）；
},
showModal:function（）{
this.setState（{modalOpen:true}）；
}
渲染：函数（）{
返回(
显示模态
显示消息
{
这个.state.showMsg？
“这就是消息”
:
无效的
}
)
}
});
为了使您的模态即使在模态打开时也能显示消息，请使用
this.setState（）
设置状态。它将改变您的状态并触发react组件的重新渲染

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

var-Modal=require（'react-Modal'）；
var SomeComponent=React.createClass({
getInitialState:函数（）{
返回{
showMsg:false，
莫达洛彭：错
}
},
showMessage:函数（）{
this.setState（{showMsg:true}）；
},
showModal:function（）{
this.setState（{modalOpen:true}）；
}
渲染：函数（）{
返回(
显示模态
显示消息
{
这个.state.showMsg？
“这就是消息”
:
无效的
}
)
}
});
不要使用
this.state.modalOpen
等来修改state对象。始终使用
this.setState（）
函数不要使用
this.state.modalOpen
等来修改state对象。始终使用
this.setState（）
函数