小编All*_*car的帖子

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

我还需要使用“ESC”键关闭模态,此时它正在关闭“CLOSE”和“CONFIRM”按钮。我正在使用 reactstrap,react hooks。键盘 {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> …
Run Code Online (Sandbox Code Playgroud)

javascript keyboard-events modalpopup reactjs reactstrap

4
推荐指数
2
解决办法
4525
查看次数