仅当我单击输入时，模态 window 才会关闭 Escape 按钮

Question

我的模态 window 只有在我单击此模态内的输入后才会在 Escape 上关闭。 需要在没有输入操作的情况下关闭模态

closeModalEsc(e) {
        if (e.keyCode === 27) {
            return this.props.closeModal();
        }
    }
    
    render() {
        const {modal, closeModal} = this.props;
        
        if (modal) {
            return (
                <div className="modal"
                onKeyDown={this.closeModalEsc}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <form 
                            action="#"
                            onSubmit={this.onAddName}>
                                <button 
                                className="modal-close"
                                type="button"
                                onClick={closeModal}>
                                    &times;</button>
                                <input 
                                placeholder="What is your name"
                                type="text" 
                                className="form-control modal-input"
                                onChange={this.onUpdateName}
                                value={this.state.textName} />
                                <input 
                                placeholder="Your last name" 
                                type="text" 
                                className="form-control modal-input"
                                onChange={this.onUpdateLastName}
                                value={this.state.textLastName} />
                                <button 
                                className="btn btn-dark"
                                type="submit">
                                    Log In</button>

此方法来自我的 App.js 文件，用于关闭模式 window

closeModal() {
        this.setState({modal: false});
    }

Udate：我通过将侦听器添加到文档而不是模态 window 来解决它，并使用了 componentDidMount

Answer 1

您正在检查e.keyCode的按键事件来自键盘事件。 这个键盘事件是从输入 controller 完成的按键或 onChange 事件引发的。 在这种情况下，焦点不在modal上，这是它希望您单击输入 controller 的原因。

<input 
    placeholder="What is your name"
    type="text" 
    className="form-control modal-input"
    onChange={this.onUpdateName}
    value={this.state.textName} 
/>
<input 
    placeholder="Your last name" 
    type="text" 
    className="form-control modal-input"
    onChange={this.onUpdateLastName}
    value={this.state.textLastName} 
/>

输入 controller 的 onChange 事件触发this.onUpdateName或this.onUpdateLastName 。 这些事件反过来对父道具进行更新或触发更新。

解决方案：使用React.creatRef ，在打开时关注模态，监听按键并关闭模态。

或者您可以实施任何您自己的解决方案来解决问题。