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

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

优化代码

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