Почему это модальное окно response- bootstrap не отвечает должным образом? - PullRequest
Новая
       73

Почему это модальное окно response- bootstrap не отвечает должным образом?

0 голосов
/ 11 июля 2020

Я работаю над веб-приложением react- bootstrap, которое использует модальные диалоги. Несколько модальных диалогов отображаются в приложении в разных местах (например, в разных компонентах, конструкциях маршрута / переключателя, разных уровнях иерархии и т. Д. c.). Однако одновременно активен только один модальный диалог.

До сих пор у меня никогда не было проблем с этим подходом (я относительно новичок в реакции). Каким-то образом я оказался в ситуации, когда два модальных диалога «полузаморожены»? Каждый из них открывается и закрывается, как и предполагалось (а также работают кнопки), но я больше не могу редактировать в них форму (а также не могу выбрать, например, текст заголовка).

Оба диалога работали, пока я не добавил еще диалоги в других местах (по крайней мере, я предполагаю). Есть ли что-то, на что мне нужно обратить внимание при работе с несколькими модальными диалогами? Или, в более общем смысле, например, где отображать модальные диалоги?

Рассматриваемый модальный диалог 

        <Modal show={show} onHide={discardChanges} backdrop={edited ? "static" : true}
               keyboard={edited ? false : true} size="lg" centered>
            <Modal.Header closeButton>
                <Modal.Title>{t("edit tour")}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <TourContainer tourTemplate={editableTourTemplate} pointsOfInterest={pointsOfInterest}
                               dispatch={dispatchEditableTourTemplate} validated={edited} />
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={saveChanges} disabled={!(edited && editableTourTemplate.valid)}>
                    {t("save")}
                </Button>
                <Button onClick={discardChanges} variant="outline-primary">{t("cancel")}</Button>
            </Modal.Footer>
        </Modal>

Он отображается в другом компоненте примерно так: 

                                <Col>
                                    <button onClick={showEditModal} className="bg-white border-0">
                                        <img src="/img/pencil.png" alt="Pencil" height="25" width="25" />
                                    </button>
                                    <TourEditModal show={editModalVisible} hide={hideEditModal}
                                                   tourTemplate={tourTemplate}
                                                   pointsOfInterest={pointsOfInterest}
                                                   update={updateTourTemplates.update} />
                                </Col>

1 Ответ

0 голосов
/ 12 июля 2020

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

Как только я переместил модальные окна из элемента NavLink, они снова стали работать, как и предполагалось.

...