我的模态组件在不同的文件中，我试图从另一个组件打开它

Question

BuySectionItem.js

    class BuySectionItem extends React.PureComponent {
        constructor( props ) {
            super( props );

            this.state = {
                modalIsOpen:        false,
            }
            this.toggleTicketModal = this.toggleTicketModal.bind( this );
        }

        toggleTicketModal = () => {
            this.setState( { modalIsOpen: ! this.state.modalIsOpen } );
        }

        componentDidMount() {
            // this.setActivePrice();
        }

        outputBuyButton( offer ) {
            // Universe ID override is present.

                return  <Button text="Buy Ticket" type="green-gradient" onClick={ this.toggleTicketModal }/>

            return null;
        }

        render() {
            <div>
                {this.state.modalIsOpen &&
                    <TicketModal isOpen={this.state.modalIsOpen} toggleTicketModal={ this.toggleTicketModal } />
                }
            </div>;
        }
    }

    export default BuySectionItem;

TicketModal.js

    import React from 'react';
    import Modal from 'react-modal';
    import PropTypes from 'prop-types';

    const customStyles = {
        content: {
            top:         '50%',
            left:        '50%',
            right:       'auto',
            bottom:      'auto',
            marginRight: '-50%',
            transform:   'translate(-50%, -50%)',
        },
    };

    Modal.setAppElement( 'body' )

    class TicketModal extends React.Component {

componentDidMount() {
        this.handleKeyEvents();
    }

    componentWillUnmount() {
        this.removeKeyHandler();
    }

    /**
     * Watch for the escape key when the modal is open to allow users to escape from the modal.
     */
    handleKeyEvents() {
        const handleKeyDown = event => {
            if ( event.keyCode === 27 ) {
                this.props.toggleTicketModal( event );
            }
        };

        /*
         * Attach our event listener to the window.
         */
        window.addEventListener( 'keydown', handleKeyDown );

        /*
         * Cancel the key event handling, and remove
         */
        this.removeKeyHandler = () => {
            window.removeEventListener( 'keydown', handleKeyDown );
        };
    }
    render() {
            const {
                isOpen,
                // pending,
                toggleTicketModal,
            } = this.props;
            return (
          <Modal
          isOpen={isOpen}
          onRequestClose={toggleTicketModal()}
          style={customStyles}
          contentLabel="Meal Modal"
          >
            <div className="modal-wrapper">
              <div className="container text-center">
                <h1>Hello</h1>
                <h2>ID of this modal is 100</h2>
                <h3>This is an awesome modal.</h3>
                <button onClick={toggleTicketModal()}>close</button>
              </div>
            </div>
          </Modal>
            )
        }
    }
    TicketModal.propTypes = {
        pending:           PropTypes.bool,
        toggleTicketModal: PropTypes.func,
        isOpen:            PropTypes.bool,
    };

    export default TicketModal;


As you can see I am trying to open the ticket modal component from the `buysectionitem` component on a button Click.

But for some reason the Modal doesn't seem to be opening.

When I kept a break point I see that the `togglemodal` function is being called but doesn't open at all.

我添加了更多代码，因为我还需要有关处理键事件的指导。这个关键事件应该在我单击似乎不起作用时从屏幕上删除模态。

Answer 1

您在 TicketModal 呈现时调用 toggleTicketModal 函数，可以这样调用它

<button onClick={()=>toggleTicketModal()}>close</button>

这样就可以了。

Answer 2

你的代码有很多错误。模式中的按钮 onclick 处理程序应该如下所示，

    <button onClick={toggleTicketModal}>close</button>

此外，您不必在关闭模态时执行相同的处理，以下是模态道具中的多余内容

onRequestClose={toggleTicketModal}

您案例中的主容器 BuySectionItem.js 也几乎没有问题。 1.there 在 render 方法中没有 return。 2.conditional 渲染未正确完成，您永远不会根据 modalIsOpen 状态调用 outPutBuyButton 3. 你用了名字 "isModalOpen" 而不是 "modalIsOPen" ，打错了。

这是工作代码。根据您的需要修改。

https://codesandbox.io/s/gracious-hopper-vmerd

Answer 3

优化代码

class BuySectionItem extends React.Component {
  constructor() {
    super();
    this.state = {
      showModal: false
    };
  }

  handleOpenClose = () => {
    this.setState(prev => ({ showModal: !prev.showModal }));
  };
  render() {
    return (
      <div>
        <button onClick={this.handleOpenClose}>Trigger Modal</button>
        <Modal
          isOpen={this.state.showModal}
          contentLabel="Minimal Modal Example"
        >
          <TicketModal handleOpenClose={this.handleOpenClose} />
        </Modal>
      </div>
    );
  }
}
class TicketModal extends React.Component {
  render() {
    const { handleOpenClose } = this.props;
    return (
      <div>
        <button onClick={handleOpenClose}>Close Modal</button>
        <hr />
        <p>Welcome to opened model</p>
      </div>
    );
  }
}

Live demo

我的模态组件在不同的文件中，我试图从另一个组件打开它

I have my modal component in a different file and I'm trying to open it from another component

javascript

dom-events

reactjs

react-modal