0
319
Viewscómo mostrar bootstrap Modal en otro componente reaccionar js
Estoy usando react bootstrap Modal ahora tengo Modal. Quiero mostrar ese modal en diferentes componentes para la funcionalidad de edición proporcionada. como puedo archivar esto
UpdateUserModal.js
import React,{useState} from 'react' import {Modal} from 'react-bootstrap' const UpdateUserModal = () => { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <div> <Button variant="primary" onClick={handleShow}> Launch demo modal </Button> <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> <Button variant="primary" onClick={handleClose}> Save Changes </Button> </Modal.Footer> </Modal> </div> ) } export default UpdateUserModal Quiero agregar mi <button type="submit" className="btn btn-warning mx-1">{<FaUserEdit/>} Edite</button> en un botón de componente diferente
Actualizar: 
·
Juan Pablo Isaza
2 answers
Answer question0
Es lo mismo que con todos los componentes en React:
- Importarlo:
import UpdateUserModal from "./UpdateUserModal"; - Llámelo:
<UpdateUserModal />
Mire el siguiente sandbox para ver un ejemplo rápido: https://codesandbox.io/s/divine-water-7sofms
·
Juan Pablo Isaza
Report
0
Actualice su UpdateUserModal.js con esto.
import {Modal} from 'react-bootstrap' const UpdateUserModal = (props) => { const {show, handleClose, handleShow} = props return ( <div> <Button variant="primary" onClick={handleShow}> Launch demo modal </Button> <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> <Button variant="primary" onClick={handleClose}> Save Changes </Button> </Modal.Footer> </Modal> </div> ) } export default UpdateUserModalAhora, donde quiera que desee usar este modal, cree este estado y funcione allí:
const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true);Ahora, en su botón de edición donde desee esto, actualice su estado al hacer clic en el botón,
onClick={()=> handleShow()}y luego importar y llamar:
import UpdateUserModal from "./UpdateUserModal"; <UpdateUserModal show={show} handleClose={handleClose} handleShow={handleShow}/>
·
Juan Pablo Isaza
Report
Answer question