前端之家

  1. 首页
  2. 问答

使用键盘上的Esc键关闭模式弹出窗口

• 问答

我还需要使用“ ESC”键关闭模态，此时它正在关闭“ CLOSE”和“ CONFIRM”按钮。我正在使用reactstrap，react挂钩。 键盘{show}和handleclose 这没用。

代码如下：


const DeleteUserModal = props => {
    const { user,show } = props;

    const deleteUser = async () => {
        await props.removeUser(user);
        props.onCloseModal();
    };

    const handleKeyPress = target => {
        if (target.charCode === ENTER_KEY) {
            deleteUser();
        }
    };
    


    return (
        <div onKeyPress={handleKeyPress}>
            <Modal isOpen={show} toggle={props.onCloseModal}  >
                
                <ModalHeader toggle={props.onCloseModal}>
                    <IntlMessages id="modal.delete.user.title" />
                </ModalHeader>

                <ModalBody>
                    <IntlMessages id="modal.delete.user.description" />
                </ModalBody>

                <ModalFooter>
                    <Button classname="cancel" onClick={props.onCloseModal}>
                        <IntlMessages id="modal.common.cancel" />
                    </Button>
                    <Button classname="action" onClick={deleteUser}>
                        <IntlMessages id="modal.common.ok" />
                    </Button>
                </ModalFooter>
            </Modal>
        </div>
    );
};

export default DeleteUserModal;

跟随模态的两个动作

iCMS 回答：使用键盘上的Esc键关闭模式弹出窗口

您可以查看引导程序文档。

如果未找到任何内容，则可以向ESC键添加事件侦听器，然后调用onCloseModal

,

在普通JavaScript中，您可以执行以下操作：

document.onkeydown = function (evt) {
    if (evt.keyCode == 27) {
        // Escape key pressed
        props.onCloseModal();
    }
};
,

您可以设置事件监听器。

 useEffect(() => {
      const close = (e) => {
        if(e.keyCode === 27){
          props.onCloseModal()
        }
      }
      window.addEventListener('keydown',close)
    return () => window.removeEventListener('keydown',close)
  },[])
javascriptkeyboard-eventsmodalpopupreactjsreactstrap
本文链接：https://www.f2er.com/1871447.html

大家都在问