Блог

Я пытаюсь создать свой собственный простой модальный режим в React, который показывает серое наложение, покрывающее экран, и окно сверху с кнопками OK и Cancel.

Однако весь пример кода, который я видел в Интернете (как для React, так и для обычного JS / jQuery), страдает от одной и той же проблемы: пока модальный режим отображается на экране, пользователь может использовать клавишу tab для доступа к элементам управления, которые «выделены серым цветом» из-за наложения, и, следовательно, обойти модальность.

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

Подумав об этом немного больше, я начал задаваться вопросом, в чем реальная выгода этого требования.

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