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

#reactjs #events #keydown

#reactjs #Мероприятия #нажатие клавиши

Вопрос:

У меня есть компонент, который показывает модальное значение при нажатии '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 amp;amp; <Modal hideScroll={this.hideScroll} />
    return (
      {modal}
      <input onKeyDown={this.onKeyPress}>
    )
  }
}

Ответ №1:

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