Question

我有2个组件，想要打开一个模态，但只有当另一个事件发生时（第一个事件是单击文本，更改该文本，然后才应该显示模态）。我是新的反应，因为我有这两个事件我很困惑如何将道具传递给另一个组件。我究竟做错了什么？谢谢！

应用组件

  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由class AModal状态控制，而不是来自class App。

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

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

这样的事情（用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
          });
      }

      ...
  }

React - 来自另一个组件的表示组件的开放模式将不起作用。为什么？

1 个答案: