Hola, estoy tratando de abrir un Modal en NavDropdown.Item . Haga clic en el elemento que está dentro de una NavBar de navegación,
Si hago algo como esto
import { useState } from "react"; import { rockPositions } from "../../constant/markers" import { CloseButton, NavDropdown, Alert } from "react-bootstrap"; import Modal from 'react-modal/lib/components/Modal'; import { RouteBadge } from "../RouteBadge/RouteBadge"; import { RouteTable } from "../RouteTable/RouteTable"; import { modalStyle } from '../RockModalMarker/RockModalMarker.css.js'; const RockDropDownModal = (props) => { const [isOpen, setIsOpen] = useState(false); const route = props.route; const rock = rockPositions.find(rockPosition => rockPosition.name === route.rock); const index = props.rockIndex; const toggleModal = (e) => { setIsOpen(!isOpen); }; if (!isOpen) { return ( <NavDropdown.Item key={index} href="#rock" onClick={toggleModal}><span className={"rock-name-dropdown"}>{route.rock}</span>: {route.name}</NavDropdown.Item> ) } return ( <Modal key={index} defaultStyles={modalStyle} isOpen={isOpen} onRequestClose={toggleModal} centered ariaHideApp={false} > <CloseButton variant="white" onClick={toggleModal} /> <Alert variant="primary" style={{ marginTop: "20px", backgroundColor: "#01579B", borderColor: "#0277BD" }}> <Alert.Heading style={{ color: "#FFF" }}><p className="routeName">{rock.name}</p></Alert.Heading> </Alert> <RouteBadge rock={rock} /> <RouteTable rock={rock} /> </Modal> ) } export { RockDropDownModal }; el modal se abre bien pero está detrás de la NavBar de navegación y si cierro la barra de navegación, el modal también se cierra.
Estaba tratando de cerrar la barra de navegación y solo mostrar el modal, pero envuelvo el elemento desplegable de esta manera
<Navbar.Toggle> <NavDropdown.Item key={index} href="#rock" onClick={toggleModal}><span className={"rock-name-dropdown"}>{route.rock}</span>: {route.name}</NavDropdown.Item> </Navbar.Toggle>cierra la barra de navegación pero también el modal.
En la captura de pantalla aquí , puede ver la barra de navegación, cuando se hace clic en el elemento seleccionado, se debe abrir Modal y cerrar la barra de navegación.
¿Cómo puedo evitar que el Modal se cierre?
Si uno de los principales problemas aquí es que la barra de navegación se superpone al modal, ¿ha intentado establecer el índice z del modal en un valor mayor? Esto establecería el modal sobre la barra de navegación y al cerrar el modal, también cerrará la barra de navegación.
Además de esto, intente jugar con la propiedad expandida de Navbar. Podrías crear un estado dentro de la barra de navegación
const [isExpanded, setIsExpanded] = useState(`default_boolean_value`) <Navbar expanded={isExpanded}/>en qué lugar al hacer clic en un elemento desplegable dentro del componente secundario, puede establecer el estado de la barra de navegación en expandido = falso
aquí está la documentación, puede encontrar accesorios expandidos aquí https://react-bootstrap.github.io/components/navbar/