EventListeners на документах, выполненных до onKeyDown / onChange в React Inputs? - PullRequest
Новая
       35

EventListeners на документах, выполненных до onKeyDown / onChange в React Inputs?

0 голосов
/ 08 марта 2019

Я прикрепил прослушиватель событий для обнаружения клавиши «Ввод» в теле документа следующим образом: 

document.body.addEventListener("keydown", this.handleEnterKey, false);

private handleEnterKey(e: any) {
    if (e.keyCode === 13) {
        if (!this.submitDisabled) {
            this.state.files.length > 1 ? this.addComponents() : this.addComponent();
        }
    }
}

В глубине иерархии компонентов у меня есть вход React: 

          <input
            onChange={this.handleChange.bind(this)}
            onKeyDown={this.onKeyDown.bind(this)}            
          />

Каждый раз, когда я щелкаю по входам, eventListener , примененный ко всему документу, выполняется, а затем вызывается функция, определенная в onChange / onKeyDown элемента Input.Как я могу предотвратить это?

Мне известно, что если я также наложу EventListener на входы и не позволю им пузыриться в DOM, это будет исправлено, но я хочу предотвратить явление пузырьков, используя свойство поля React's Input?

Я пытался stopPropagation () во входных данных keyHandlers, но безрезультатно: 

private handleChange(e: any) {
    e.stopPropagation();
    ...
}

В случае получения в документе onKeyDown он четко показываетчто eventPhase равен 3 (всплывает), а путь события также содержит мои входные данные в качестве первой записи.Я полагаю, это просто вопрос предотвращения пузыря.

...