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

在react-modal中更新父状态

1 个答案: