[英]Modal window closing on Escape button only when i click on input
My modal window closes on Escape only after i click on input inside this modal.我的模态 window 只有在我单击此模态内的输入后才会在 Escape 上关闭。 Need to close modal without this manipulations with inputs
需要在没有输入操作的情况下关闭模态
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}>
×</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>
This method from my App.js file, to close modal window此方法来自我的 App.js 文件,用于关闭模式 window
closeModal() {
this.setState({modal: false});
}
Udate: I solved it with adding the listener to document, instead of modal window, and used componentDidMount Udate:我通过将侦听器添加到文档而不是模态 window 来解决它,并使用了 componentDidMount
The key press event which you are inspecting e.keyCode
is from a keyboard event.您正在检查
e.keyCode
的按键事件来自键盘事件。 And this keyboard event is raised from a keypress or onChange event which is done from the input controller.这个键盘事件是从输入 controller 完成的按键或 onChange 事件引发的。 In this case the focus is not on the
modal
, that the reason it expects you to click on the input controller.在这种情况下,焦点不在
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}
/>
The onChange event of either of the input controller trigger this.onUpdateName
or this.onUpdateLastName
.输入 controller 的 onChange 事件触发
this.onUpdateName
或this.onUpdateLastName
。 These event in turn makes an update or triggers an update to the parent props.这些事件反过来对父道具进行更新或触发更新。
Solution: Use React.creatRef
, to focus on the modal when its opened, listen for keypress and close the modal.解决方案:使用
React.creatRef
,在打开时关注模态,监听按键并关闭模态。
Or you could implement any of your own solution to the problem.或者您可以实施任何您自己的解决方案来解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.