javascript - React - 从另一个组件的演示组件打开模式将不起作用。为什么？

Question

我有 2 个组件，想要打开一个模式，但只有当另一个事件发生时(第一个事件是单击文本，更改该文本，然后才应该显示模式)。我是新手，因为我有这两个事件，所以我对如何将 props 传递给另一个组件感到困惑。我究竟做错了什么？ 谢谢!

应用程序组件

  class App extends React.Component {
          constructor(props) {
              super(props)
              this.state = {
                  display: false,
                  modal: false
              }

              this.toggle = function() {
                  this.setState({
                      display: !this.state.display
                  });
              }.bind(this);

              this.showModal = function() {
                  this.setState({
                      modal: true
                  });
              }.bind(this);

              this.hideModal = function() {
                  this.setState({
                      modal: false
                  });
              }.bind(this);
          }
          componentDidUpdate(prevProps, prevState) {
              if (!prevState.display && this.state.display) {
                  if (!this.state.modal) {
                      setTimeout(this.showModal, 1000);
                  }
              }

          }

          render() {

              const msg = this.state.display ? <p>hey</p> : <p>bye</p>,
                  modal = this.state.modal ? (
                      <AModal onClick={this.toggle} />
                  ) : null;
              return (
                  <div>
                <a onClick={this.toggle}><p>{msg}</p></a>
                {modal}
              </div>
              );
          }
      }

模态组件

    import Modal from 'react-modal';

    class AModal extends React.Component {
        render() {
            const customStyles = {
                content: {
                    top: '50%',
                    left: '40%',
                    right: 'auto',
                    bottom: 'auto',
                    marginRight: '-50%',
                    background: '#91c11e',
                    transform: 'translate(-50%, -50%)'
                }
            };

            return (
                <div>
                  <Modal
                      isOpen={this.state.modal}
                      onAfterOpen={this.afterOpenModal}
                      onRequestClose={this.hideModal}
                      style={customStyles}
                      contentLabel="Example Modal">
                      <h2>hey</h2>

                  </Modal>
            </div>
            );
        }
    }

Answer 1

您的模态 isOpen 由 AModal 类 的状态控制，而不是由 App 类 控制。

<Modal
    isOpen={this.state.modal}
    ...
</Modal>

我相信您需要将控制模式的隐藏/可见状态的 Prop 传递给该组件。

像这样(用 this.state.modal 或 this.state.display 替换状态:

<AModal
    onClick={this.toggle}
    isOpen={this.state.whatever_state_property_controls_modal_visibility} />

然后在模态组件中:

<Modal isOpen={this.props.isOpen} ...

顺便说一句，我会将您在 App 的构造函数中创建的方法更新为类方法:

class App extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              display: false,
              modal: false
          }

          this.toggle = this.toggle.bind(this);
          // rest of the methods
      }


      toggle() {
          this.setState({
              display: !this.state.display
          });
      }

      ...
  }