Tengo un botón con un cuadro y el cuadro se ocultará/se mostrará (alternar) al hacer clic en el botón. Esto está funcionando bien ahora, quiero que cuando hagamos clic en el cuerpo, excepto en el botón, el cuadro debe ocultarse.
Mi código:-
function App() { const [show, setShow] = useState(false); return ( <div> <button className="btn" onClick={() => setShow(!show)}></button> {show ? <div className="box"></div> : null} </div> ); } export default App;¡Gracias por tus esfuerzos!
Si entendí bien tu punto. Puedes resolverlo así. Cerrará el cuadro/modal cuando uno haga clic fuera del modal o cuerpo
function App() { const [show, setShow] = useState(false); return ( <div> <button className="btn" onClick={() => setShow(!show)}></button> {show ? <div onClick={() => setShow(false)} style={{width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}> <div className="box" onClick={(e) => e.stopPropagation()}></div> </div> ); } export default App;Hay muchos trucos para solucionar esto. Pero uno de ellos prefiero, hacerlo como modales. Asi que:
box que muestra la parte posterior del cuadro function App() { const [show, setShow] = useState(false); return ( <div> <button className="btn" onClick={() => setShow(!show)}></button> {show && ( <> <div style={{bottom:0 , top:0, right:0, left:0,position:"absolute"}} onClick={()=> setShow(false)}></div> <div className="box"></div> </>) } </div> ); export default App;