Javascript 如何在输入时禁用热键？

当用户按下某个键时，将显示一个组件。我有四个这样的组成部分。当用户键入或编辑时，我想禁用热键

我在四个组件中的每一个都有这个代码

componentDidMount(){
    document.body.addEventListener("keypress", (e) => {
        if (e.key === "t") { // "n" "w" "," for the others
            this.setState({opened: !this.state.opened});
        }
    });
}

---

我只想在用户键入或编辑时禁用热键。有没有办法知道是否有任何输入处于焦点？或者另一种方式，我们是否可以仅在所有输入都是“模糊”时添加事件侦听器？

您可以将当前打开的组件状态移动到最向上的组件，如下所示：

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]);
    }
}

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});
        }
    });
  }

我假设每次只能有一个打开的组件。此外，您还可以通过按ESC键来关闭它们。 对于每个组件，其可见性将通过将

props.openComponent

与其名称进行比较来控制，因为当前状态组件是通过props传递给每个组件的

---

这样，您就不需要注销热键函数。当您使用打开的组件开始键入时，由于（！this.state.openComponent）条件的原因，

setState

将被忽略。

因此，我们需要知道页面上的任何输入是否处于焦点位置，如果其中任何输入处于焦点位置，那么我们将不会执行任何显示或隐藏组件的操作

让我们假设我们的组件在状态中有一些属性，指示页面上的某些输入是聚焦的，我们称之为

isFocus

因此，我们需要收集页面上的所有输入，对它们进行迭代，并为每个输入分配

focus

和

blur

事件处理程序，以便我们能够知道何时更改状态中的

isFocus

属性

首先，我们需要收集页面上的所有输入，我们使用：

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});
    }
});

所有的东西都会像这样：

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]);
    }
}

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});
        }
    });
  }

---

希望这有帮助。祝你好运。

谢谢，但这不是我想要的，我无法修改它使其正常工作。当组件打开且我没有编辑时，我仍然希望能够按下一个键，然后组件关闭。您可以创建一个新的状态

编辑

，并在调用

设置状态之前在
热键
函数上对其进行评估。在组件关闭时也将编辑设置为false。相关：