1

我试图在 a 中显示一条简单的消息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重新打开模式后才会显示，但我希望它在打开时显示。

4

1 回答 1

0

为了让您的模态即使在打开模态时也能显示消息，请使用 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>
    )
  }
});
于 2016-07-16T12:38:20.490 回答