La confirmación emergente debe cerrarse cuando se hace clic en cualquier parte de la pantalla fuera de la ventana emergente. Pero la ventana emergente permanece en la página incluso después de hacer clic en el exterior. Y sigue mostrando " Línea 2: 8: 'Fondo' está definido pero nunca usó no-unused-vars Línea 3: 8: 'Modal' está definido pero nunca usó no-unused-vars" en mi terminal. Aquí está mi código.
#Todo.js
import {useState} from 'react' import Modal from './Modal' import Backdrop from './Backdrop' function Todo(props){ const [modalIsOpen, setModalIsOPen] = useState(false) function deleteHandler(){ setModalIsOPen(true) } function closeModalHandler(){ setModalIsOPen(false) } return <div className='card'> <h2> { props.text} </h2> <div className='actions'> <button onClick={deleteHandler}>Delete</button> </div> {modalIsOpen && <Modal/>} {modalIsOpen && <Backdrop onCancel={closeModalHandler} />} </div> } export default Todo;#Fondo.js
import propTypes from "prop-types" function Backdrop(props){ return <div className='backdrop' onClick={propTypes.onCancel}/> } export default Backdrop#Modal.js
function Modal(){ return <div className='modal'> <p>Are you sure?</p> <button className='btn-alt'>Cancel</button> <button className='btn'>Confirm</button> </div> } export default ModalEn primer lugar, creo que tu Modal tiene un problema de accesorios.
return <div className='backdrop' onClick={propTypes.onCancel}/> Debería ser así onClick={props.onCancel} porque estás usando props en lugar de propTypes .
En segundo lugar, por la advertencia que recibe
Línea 2:8: 'Backdrop' está definido pero nunca se usa no-unused-vars Línea 3:8: 'Modal' está definido pero nunca se usa no-unused-vars
Si está utilizando eslint, debe verificar que su .eslintrc debe tener algunas configuraciones como las siguientes
"extends": [ "eslint:recommended", "plugin:react/recommended" ]Si no está allí, puede instalarlo.
npm install eslint@7 --save-dev npm install eslint-plugin-react --save-dev