Блог

Я работаю над React.js проект с reactstrap и возникли некоторые проблемы при обработке событий клавиатуры с компонентом, который находится в модальном режиме.

вот мой простой фрагмент кода

 <Modal isOpen={this.state.modal} toggle={this.toggle}>
      <ModalBody>
              <Input onKeyPress= {(e) => if(e.key === 'Enter') {//do something}} />
      </ModalBody>
</Modal>
  

Когда я пытаюсь добавить обработчик событий во входной компонент и протестировать его, когда modal открыт, он работает неправильно и

Я попытался добавить e.preventdefault() внутри обработчика onKeyPress, но даже ввод с клавиатуры не сработал в компоненте ввода.

и я пытался e.stopPropagation() , но ничего не произошло.

Я думаю, что модальный компонент фиксирует событие нажатия клавиши. Потому что, когда я нажимаю кнопку ESC, она отключается сама.

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