在 react-modal 中更新父状态

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 中更新父状态

Update parent state inside react-modal

reactjs

react-modal