React - столкновение слушателей событий - PullRequest
Новая
       8

React - столкновение слушателей событий

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

У меня есть компонент, который показывает модальное при нажатии 'Enter'.Работает круто.

Я бы хотел добавить клавиатурные взаимодействия в модал.И все шло круто ДО Я выбрал 'Enter' в качестве кнопки подтверждения в модале.

В чем моя проблема?Enter - это клавиша, используемая для отображения модального режима, когда вы находитесь в компоненте.Но также, это ключ подтверждения, когда вы находитесь в модальном.

Звучит хорошо.НО проблема в том, что нажатие клавиши «Enter» на компоненте также отлавливается моим модалом (в window.addEventListener('keydown', this.onKeyPress);) в первом цикле.

Итак, все началось и спряталось в один и тот же момент, и я не могу с ним взаимодействовать.Предложение или обходной путь для этого?

Подсказка :

Я попытался добавить timeOut из 500 миллисекунд в мой modal.componentDidMount.addEventListener.НО проблема в том, что это связано с компьютером, а не с детерминированным поведением.В любом случае я бы гарантировал правильное поведение.

Кроме того, мой код выглядит так:

0.modal.jsx 

class Modal extends React.Component {
  //...
  onKeyPress (event) {
    if (event.key === 'Enter') {
      this.props.hideScroll();
    }
  }

  // MY PROBLEM (I think so)
  componentDidMount () {
    window.addEventListener('keydown', this.onKeyPress);
  }

  componentWillUnmount () {
    window.removeEventListener('keydown', this.onKeyPress);
  }

  render () {
    return <div>Cool Modal</div>;
  }
}

1.component.jsx 

class Component extends React.Component {
  //...
  onKeyPress (event) {
    if (event.key === 'Enter') {
      this.setState({
        showModal: true
      });      
    }
  }

  render () {
    let modal = this.state.showModal && <Modal hideScroll={this.hideScroll} />
    return (
      {modal}
      <input onKeyDown={this.onKeyPress}>
    )
  }
}

1 Ответ

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

event.stopPropagation должен делать эту работу.Похоже, что реакция так чертовски быстра (захват события в компоненте изменяет состояние), что делает модальным.и после рендеринга он получает то же событие, которое было записано в компоненте (в основном).На самом деле это синтетическое событие на уровне компонента (оболочка вверху нативного события)

...