Semantic-UI Modal удаляет мою нажимную боковую панель

#reactjs #modal-dialog #semantic-ui #sidebar #semantic-ui-react

#reactjs #модальный диалог #semantic-ui #боковая панель #semantic-ui-реагировать

Вопрос:

Я использую Semantic-UI-React в очень простом интерфейсе. На главной странице используется a Sidebar.Pushable для отображения меню и основного содержимого. Если какой-либо из подкомпонентов открывает a Modal , Sidebar он перестает реагировать. Ошибки нет — я предполагаю, что это как-то связано с тем, что какой-то CSS безвозвратно изменился на каком-то уровне. Как только a Modal открывается в любом месте приложения, единственный способ снова Sidebar сделать его доступным для нажатия — перезагрузить страницу.

Я сделал все возможное, чтобы углубиться в CSS, но мне все еще этого не хватает. На Github есть древняя проблема, связанная с аналогичным поведением в самом semantic-ui (т. Е. Без участия React), Но окончательного решения нет.

Чтобы воссоздать, просто используйте код из примера боковой панели и добавьте кнопку, которая открывает модал в Pusher . Как только Modal он открыт, Sidebar он мертв.

Я создал образец песочницы.

Обновление: открыта проблема с Github: https://github.com/Semantic-Org/Semantic-UI-React/issues/4110

Ответ №1:

У меня такая же проблема, и я нашел обходной путь.

Сначала я добавляю фиктивное имя класса к триггеру боковой панели. Затем в скрытом дескрипторе я проверяю цель, и если это класс, я не устанавливаю состояние.

 <Button size='huge' className="NoClose" icon style={{marginTop: '1em'}}
    onClick={this.setVisible}><Icon className="NoClose" name='list' /> Menu</Button>

handleOnHide = (e, data) => {
    if(!e.target.classList.contains('NoClose')){
        this.setState({ visible: !this.state.visible });
    }
}

Надеюсь, это поможет, пока не будет найдено реальное исправление

1. я не уверен, что понимаю ваше решение. Безуспешно пытался воспроизвести его. Можете ли вы попробовать создать песочницу на основе моей, чтобы продемонстрировать?

2.Я не уверен, как это сделать с функциональными компонентами, но с классом это выглядит так: codesandbox.io/s/fervent-elbakyan-88r5f?file=/src/App.js 88r5f.csb.приложение

3. Ваш пример не работает: я не могу свернуть боковую панель после открытия, а боковая панель не работает после использования модального. Я что-то упустил?

4. Он не работает в изолированной среде, но используйте эту ссылку (она работает для меня) 88r5f.csb.app

5. Понял. Действительно ценю взлом и усилия :). Я посмотрю, может ли это работать в моем проекте.

Ответ №2:

Похоже, это было исправлено в semantic-ui-react@2.0.3 . Подробнее см. В этом выпуске.