Question

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

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

{{1}}

我只想在用户输入或编辑时禁用热键。有没有办法知道是否有任何输入？或者另一方面，只有当所有输入都在模糊时才能添加事件监听器吗？

Answer 1

所以我们需要知道页面上的任何输入是否都是焦点，如果它们中的任何一个被聚焦，那么我们就不会做任何事情来显示或隐藏组件。

假设我们的组件在状态中具有一些属性，表明页面上的某些输入是焦点，让我们称之为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});
        }
    });
  }

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

Answer 2

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

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与其名称进行比较来控制，前提是当前状态组件通过道具传递给每个组件。

这样您就不需要取消注册热键功能。当您开始使用开放组件进行输入时，由于setState条件，if (!this.state.openComponent)将被忽略。

如何在reactjs中输入时禁用热键？

2 个答案: