necesito que cuando hago clic en un bloque, se abre una entrada (ya implementada) y se cierra otro bloque, por favor ayuda. Aquí está mi código: ya me di cuenta de que aparece la entrada onClick, pero no puedo manejar con otros
function App() { const [isChecked, setIsChecked] = useState(false) const [isClosed, setIsClosed] = useState(false) const handleCheck = () => { setIsChecked(isChecked => !isChecked) } const handleClose = () => { setIsClosed(isClosed => !isClosed) }devolver (
<div className="App"> <div onClick={handleCheck}>block one</div> {isChecked && <input/> } <div onClick={handleClose}>block two</div> {isClosed && <input/> } </div>); }
import { useState } from "react" export default function App() { const [isChecked, setIsChecked] = useState(false) const [isClosed, setIsClosed] = useState(false) const handleCheck = () => { setIsChecked(true) setIsClosed(false) } const handleClose = () => { setIsClosed(true) setIsChecked(false) } return( <div className="App"> <div onClick={handleCheck}>block one</div> {isChecked && <input/>} <div onClick={handleClose}>block two</div> {isClosed && <input/>} </div> ) }hacer esto
function App() { const [isChecked, setIsChecked] = useState(true) const [isClosed, setIsClosed] = useState(true) const handleCheck = () => { setIsChecked(isChecked => !isChecked) } const handleClose = () => { setIsClosed(isClosed => !isClosed) } return ( <div className="App"> <div onClick={handleClose}>block one</div> {isChecked && <input/> } <div onClick={handleCheck}>block two</div> { isClosed && <input/> } </div> ); }He hecho mi problema por mí mismo. Aquí está mi código:
import { useState } from "react" export default function App() { const [isChecked, setIsChecked] = useState(false) const [isClosed, setIsClosed] = useState(false) const handleCheck = () => { setIsChecked(isChecked => !isChecked) } const handleClose = () => { setIsClosed(isClosed => !isClosed) } return( <div className="App"> { isClosed ? null : <div onClick={handleCheck}>block one</div> } {isChecked && <input/>} { isChecked ? null : <div onClick={handleClose}>block two</div> } {isClosed && <input/> } </div> ) }