当用户按下某个键时,会显示一个组件。我有四个这样的组件。当用户输入或编辑时,我想禁用热键。
我在四个组件中的每个组件中都有以下代码
componentDidMount(){
document.body.addEventListener("keypress", (e) => {
if (e.key === "t") { // "n" "w" "," for the others
this.setState({opened: !this.state.opened});
}
});
}
我只想在用户键入或编辑时禁用热键。有没有办法知道是否有任何输入处于焦点中?或者以另一种方式,只有当所有的输入都是“模糊的”时,我们才能添加事件侦听器吗?
发布于 2018-06-04 03:34:48
因此,我们需要知道页面上是否有任何输入是焦点,如果它们中的任何一个是焦点,那么我们就不会做任何显示或隐藏组件的操作。
让我们假设我们的组件在状态中有一些属性,该属性指示页面上的一些输入是焦点的,让我们称其为isFocus
。
因此,我们需要收集页面上的所有输入,遍历所有输入,并为每个输入分配focus
和blur
事件处理程序,以便我们能够知道何时更改状态中的isFocus
属性。
首先,我们需要收集页面上的所有输入,我们使用:
const inputs = document.getElementsByTagName('input')
。
遍历所有这些事件并分配focus
和blur
事件处理程序:
for (let input of inputs) {
input.addEventListener('focus', () => this.setState({isFocus: true}));
input.addEventListener('blur', () => this.setState({isFocus: false}));
}
最后,让我们更改keypress
事件的条件:
document.addEventListener('keypress', e => {
if (!this.state.isFocus && e.key === "t") {
this.setState({opened: !this.state.opened});
}
});
所有东西在一起看起来都是这样的:
componentDidMount() {
const inputs = document.getElementsByTagName('input');
for (let input of inputs) {
input.addEventListener('focus', () => this.setState({isFocus: true}));
input.addEventListener('blur', () => this.setState({isFocus: false}));
}
document.addEventListener('keypress', e => {
if (!this.state.isFocus && e.key === "t") {
this.setState({opened: !this.state.opened});
}
});
}
希望这能有所帮助。祝好运。
发布于 2018-06-03 14:42:17
您可以将当前打开的组件状态移动到最向上的组件,如下所示:
state: {
openComponent: null
}
您的热键函数将如下所示:
hotkey(e){
const componentKeyHandlers = {
"n": {openComponent: "componentN"},
"m": {openComponent: "componentM"}
}
if (e.keyCode === 27) { //ESC
this.setState({openComponent: null});
} else if (!this.state.openComponent) {
this.setState(componentKeyHandlers[e.key]);
}
}
我假设你每次只能有一个打开的组件。此外,您还可以通过按ESC键关闭它们。对于每个组件,其可见性将通过将props.openComponent
与其名称进行比较来控制,因为当前状态组件是通过属性向下传递给每个组件的。
这样你就不需要注销热键功能了。当您使用打开的组件开始键入时,由于if (!this.state.openComponent)
条件,setState
将被忽略。
https://stackoverflow.com/questions/50663339
复制相似问题