首页 文章

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

提问于
浏览
0

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

1 回答

  • 1

    您的模态 isOpenclass AModal 的状态控制,而不是从 class App 控制 .

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

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

    所以这样的事情(用 this.state.modalthis.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
              });
          }
    
          ...
      }
    

相关问题