React Hide Component при открытии мобильной клавиатуры

Question

Мне интересно, есть ли способ скрыть компоненты React (например, компонент нижней панели навигации), пока мобильная клавиатура (Andriod, iOS, и т. Д. c.) Открыта на экране.

В настоящее время я делаю это с помощью:

@media (max-height: 400px) {
    .navclass {
        display: none;
    }
}

, но мне интересно, есть ли событие JS или подобное.

Answer 1

Когда элемент ввода фокусируется на устройствах со встроенными клавиатурами, клавиатуры всплывают. ReactJS позволяет вам писать в коде Normal JavaScript. Итак, вы можете сделать это:

this.state = {
    isNavVisible: true
}

Теперь вы можете передать это динамически как опору для компонентов и установить его в стиле элемент оболочки как встроенный стиль в основном файле компонентов.

Затем вы можете написать функцию для ваших входных данных или элементов, которая принимает фокус:

const disableNav = () => {
    if(windows.innerWidth <= 400){
          this.setState({isNavVisible: false})
    }
}