使用键盘上的Esc键关闭模态弹窗

Question

我需要通过按下"ESC"键也关闭模态框，目前只能通过点击"关闭"和"确认"按钮关闭。我正在使用reactstrap和react hooks。

这是代码：

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;

跟随模态框有两个操作

- Allan Alencar

---

关闭按钮是什么意思？ - ProEvilz

请参考Bootstrap提供的以下选项：https://getbootstrap.com/docs/4.0/components/modal/#options - Basil

我需要通过按ESC键来关闭模态框。目前它在按确认按钮或取消操作时关闭。我正在查看文档，但当我放置代码时，没有任何反应。 - Allan Alencar

Answer 1

您可以设置一个事件监听器。

 useEffect(() => {
      const close = (e) => {
        if(e.keyCode === 27){
          props.onCloseModal()
        }
      }
      window.addEventListener('keydown', close)
    return () => window.removeEventListener('keydown', close)
  },[])

- K.P

---

keyCode已被废弃：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode，请改用`e.key === 'Escape'`，以获得更好的国际键盘支持。 - MegaCookie

这个的类组件等价物是什么？ - Ronny Fitzgerald

有没有一种在React中不触碰实际DOM的方法来实现这个？ - Solomon Barayev

如果不将状态变量更改放在useEffect()参数中（末尾的括号），这不仅无法正常工作，而且会使您的监听器永远悬挂在应用程序内！ - Midiman

Answer 2

在纯JavaScript中，你可以使用以下代码：

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

- Nanoo

---

我假设 props.onCloseModal(); 用于关闭模态框。我从未使用过reactjs，如果我错了，请纠正我。 - Nanoo

我会完成这个测试。 - Allan Alencar

这个能在Windows、Mac和Linux上运行吗？ - Mars2024

好的，JS是一个hack，React是一个hack-of-a-hack，但接受更多的hack堆叠在hack之上作为答案？这太疯狂了。请不要这样做。为了你自己的理智，请不要这样做。 - Midiman

Answer 3

你可以查看Bootstrap文档。

如果没有找到，那么你可以添加一个ESC键按下的事件监听器，然后调用onCloseModal。

- Ajay Gupta

---

我会完成这个测试。 - Allan Alencar

Answer 4

这是一个使用TypeScript和新的event.key属性的示例：

 React.useEffect(() => {
    const closeOnEscapePressed = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        props.onCloseModal();
      }
    };
    window.addEventListener("keydown", closeOnEscapePressed);
    return () =>
      window.removeEventListener("keydown", closeOnEscapePressed);
  }, []);

- mepley