Javascript I'；我试图为我的模式添加关键事件，但没有'；好像不行 从“React”导入React； 从“反应模态”导入模态； 从“道具类型”导入道具类型； 从“../Icon”导入图标； 常量自定义样式={ 内容：{ 前50%， 左：50%， 右图：“自动”， 底部：“自动”， 利润率：'-50%'， 高度：“700px”， 宽度：“850px”， 转换：“转换（-50%，-50%）”， }, }; Modal.setAppElement（'body'）； 类TicketModal扩展React.Component{ componentDidMount（）{ 这个.handleKeyEvents（）； } 组件将卸载（）{ 此参数为.removeKeyHandler（）； } /** *当模式打开时，注意escape键，以允许用户从模式中退出。 */ handleKeyEvents（）{ const handleKeyDown=事件=>{ 如果（event.keyCode===27）{ this.props.toggleTicketModal（事件）； } }; /* *将事件侦听器附加到窗口。 */ window.addEventListener（'keydown'，handleKeyDown，true）； /* *取消密钥事件处理，然后删除 */ this.removeKeyHandler=（）=>{ removeEventListener（'keydown'，handleKeyDown，true）； }; } render（）{ 常数{ 伊索本， 切换ticketmodal， }=这是道具； 返回( 切换ticketmodal（e）}/> ); } } TicketModal.propTypes={ isOpen:PropTypes.bool， ToggleTicketModel:PropTypes.func， universeIdOverride:PropTypes.string， }; 导出默认TicketModal；

我试图在用户按下esc键或在模式之外时添加按键事件，模式应该关闭。但这并没有发生。我到处都看到了很多解决方案，这就是它应该如何工作的。 我的代码是否有问题？

---

有人能帮我解决这个问题吗？

您是否尝试登录该方法以查看事件是否确实被触发？我不认为使用捕获是必要的。它甚至可能引起问题。尝试删除eventlistener上的true参数addingit在我尝试保留断点时未被调用…好的，我将删除这些..因为它是我尝试过的一个解决方案，所以在添加/删除时您是否尝试将true反转为false？因为我试过了，它没有模态。是的，确实有效，我在添加事件侦听器时添加了true，在删除它时添加了false。感谢您的建议您是否尝试登录该方法以查看事件是否确实被触发？我不认为使用捕获是必要的。它甚至可能引起问题。尝试删除eventlistener上的true参数addingit在我尝试保留断点时未被调用…好的，我将删除这些..因为它是我尝试过的一个解决方案，所以在添加/删除时您是否尝试将true反转为false？因为我试过了，它没有模态。是的，确实有效，我在添加事件侦听器时添加了true，在删除它时添加了false。谢谢你的建议

import React from 'react';
import Modal from 'react-modal';
import PropTypes from 'prop-types';
import Icon from '../icon';

const customStyles = {
    content: {
        top:         '50%',
        left:        '50%',
        right:       'auto',
        bottom:      'auto',
        marginRight: '-50%',
        height:      '700px',
        width:       '850px',
        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, true );

        /*
         * Cancel the key event handling, and remove
         */
        this.removeKeyHandler = () => {
            window.removeEventListener( 'keydown', handleKeyDown, true );
        };
    }

    render() {
        const {
      isOpen,
      toggleTicketModal,
    } = this.props;

        return (
      <Modal
        isOpen={isOpen}
        style={customStyles}
        contentLabel="Ticket Modal"
      >
        <div className="modal-wrapper">
        <Icon name="close" color="green" onClick={ e => toggleTicketModal( e ) } />
          <div className="container">
          <iframe src={ 'https://www.google.com/' } scrolling="no" frameBorder="0" style={{ position: 'relative', height: '100%', width: '100%' }}/>
          </div>
        </div>
      </Modal>
        );
    }
}
TicketModal.propTypes = {
    isOpen:             PropTypes.bool,
    toggleTicketModal:  PropTypes.func,
    universeIdOverride: PropTypes.string,
};

export default TicketModal;