Quiero hacer un modal para mi aplicación. He intentado todo, y mi closeicon no cierra mi modal. Funciona bien cuando hago modal en el mismo archivo, pero quiero hacer mi modal como un componente separado. ¿Algo está mal con mi código?
Componente principal:
import { Card, Placeholder, Image, Icon } from "semantic-ui-react"; import BookModal from "./BookModal"; import { useState } from "react"; const BookCard = props => { const [showModal, setShowModal] = useState(false) return ( <Card onClick={() => setShowModal(true)}> <Image><Placeholder><Image src={props.image} size="large" /></Placeholder></Image> <Card.Content> <Card.Header>{props.title}</Card.Header> <Card.Meta> <span className='date'>{props.publishedDate}</span> </Card.Meta> <Card.Description>{props.author}</Card.Description> </Card.Content> <Card.Content extra> <Icon name='star'>Rating</Icon> </Card.Content> <BookModal key="Modal1" open={showModal} onClose={() => setShowModal(false)}/> </Card> ); } export default BookCard;Componente Infantil Modal:
import { Modal } from "semantic-ui-react"; const BookModal = props => { return ( <Modal closeIcon onClose={props.onClose} open={props.open} > <Modal.Header> <h2>Modal content</h2> </Modal.Header> </Modal> ); } export default BookModal;Se ha encontrado con un problema interesante: cuando hace clic en el icono X para cerrar el modal, el componente <Card> también recibe este clic.
Entonces, el controlador onClick en el código de la tarjeta se ejecuta cuando intenta cerrar el modal y establece el estado abierto en true nuevamente. Esto sucede después de que se ejecuta el controlador onClose en el modal, por lo que el modal permanecerá abierto.
Puede cambiar el código para abrir modal en el clic de <Image> en su lugar:
<Card> <Image onClick={() => setShowModal(true)} > <Placeholder> <Image src={props.image} size="large" /> </Placeholder> </Image> <Card.Content> <Card.Header>{props.title}</Card.Header> <Card.Meta> <span className="date">{props.publishedDate}</span> </Card.Meta> <Card.Description>{props.author}</Card.Description> </Card.Content> <Card.Content extra> <Icon name="star">Rating</Icon> </Card.Content> <BookModal key="Modal1" open={showModal} onClose={() => setShowModal(false)} /> </Card>Puede verlo todo funcionando aquí: https://codesandbox.io/s/semantic-ui-example-forked-yy7p3?file=/BookCard.js
Debido a que el componente <Image> es un hermano y no el componente principal del componente <BookModal> , el clic no "fallará" ni "aparecerá" (cualquiera que sea la semántica que prefiera) en él.
Otra forma es mantener el activador modal dentro del modal. Así es como lo hacen sus propios ejemplos: puede encontrar uno simplificado aquí: https://codesandbox.io/s/semantic-ui-example-forked-qo99z?file=/example.js