输入时如何禁用热键？
当用户按下某个键时，会显示一个组件。我有四个这样的组件。当用户输入或编辑时，我想禁用热键。
我在四个组件中的每个组件中都有以下代码
componentDidMount(){
document.body.addEventListener("keypress", (e) => {
if (e.key === "t") { // "n" "w" "," for the others
this.setState({opened: !this.state.opened});
}
});
}我只想在用户键入或编辑时禁用热键。有没有办法知道是否有任何输入处于焦点中？或者以另一种方式，只有当所有的输入都是“模糊的”时，我们才能添加事件侦听器吗？
回答 2
Stack Overflow用户
发布于 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});
}
});
}希望这能有所帮助。祝好运。
Stack Overflow用户
发布于 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
复制相似问题