Semantic UI React - предотвращение модального закрытия по нажатию кнопки «Escape» - PullRequest
Новая
       13

Semantic UI React - предотвращение модального закрытия по нажатию кнопки «Escape»

0 голосов
/ 07 апреля 2019

Редактировать: я решил это, установив closeOnEscape={false} для модального окна, затем добавил eventhandlar, как в приведенном ниже коде, который слушает escape, а затем закрыл модальное вручную в случае, если я хочу.

У меня естьModal с формой.По умолчанию Semantic UI закрывает модальное окно, если нажата Escape.Мне нужно следующее поведение:

Если моя переменная состояния showNewModifierInput равна true и пользователь нажимает escape, я хочу установить showNewModifierInput в false, но модальный режим остается открытым.В противном случае модальное значение должно закрываться как обычно.

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

Я использовал monitorEvents () в инструментах Chrome Dev и смотрел на все события, запускаемые в body, когда я нажимал escape.Первым событием, которое было вызвано, было keydown, поэтому я добавил этот код к компоненту в моем модале: 

constructor(props) {
    // other code removed...
    this.catchEscape = this.catchEscape.bind(this)
}

componentDidMount(){        
    document.addEventListener("keydown", this.catchEscape);
}

catchEscape(e){
    if(e.key == 'Escape' && this.state.showNewModifierInput){
        e.preventDefault()
        this.setState({
            ...this.state,
            showNewModifierInput: false
        })
    }
}

Модал все еще закрыт, так что предотвращение закрытия модала не предотвращаетэто другое событие, запускаемое перед body.key, чтобы инструменты chrome dev не ловили.

Цените любую помощь!

...