Как отключить горячие клавиши при вводе в ответной реакции?

Question

Когда пользователь нажимает определенную клавишу, отображается компонент.У меня есть четыре таких компонента.Когда пользователь печатает или редактирует, я хочу отключить горячие клавиши.

У меня есть этот код в каждом из четырех компонентов

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

Я хочу отключить горячие клавиши только тогда, когда пользовательпечатать или редактировать.Есть ли способ узнать, находится ли какой-либо вход в фокусе?Или мы можем добавить слушатели событий, только если все входы «размыты»?

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

* 1020И, наконец, давайте изменим условие для события 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]);
    }
}

I'mпри условии, что вы можете иметь только ОДИН открытый компонент каждый раз.Кроме того, вы можете закрыть их, нажав ESC.Для каждого компонента его видимость будет контролироваться путем сравнения props.openComponent с его именем, учитывая, что компонент текущего состояния передается каждому через реквизиты.

Таким образом, вам не нужно отменять регистрацию горячей клавишифункция.Когда вы начнете печатать с открытым компонентом, setState будет игнорироваться из-за условия if (!this.state.openComponent).