Soy relativamente nuevo en reaccionar y estoy totalmente perdido tratando de descubrir cómo hacer que aparezca un Componente cuando presiono un botón. He configurado el código como tal
<Button>GO</Button> <CalendarIcon id="calendar visibility="hidden"/>y luego useVisibility()
export default function useVisibility() { const[visibility, setVisibility] = useState("hidden") useEffect(() => { function handleVis(){ setVisibility("visible") } button.addEventListener("onClick", handleVis) return () => button.removeEventListener("onClick", handleVis) }, []) return visibility }Mi problema es que no sé cómo pasar el botón a la función para poder agregar el detector de eventos. Si estoy haciendo esto de una manera totalmente indirecta o complicándolo demasiado, por favor dígame porque estoy muy perdido.
¡Gracias!
Lo que yo haría es dejar que cada instancia en la que renderice un botón especifique cómo debe comportarse su controlador de clics, ya que puede haber muchos casos de uso para un botón en un sitio web.
function MyComponent() { const[isVisible, setIsVisible] = useState(false) const handleVisibilityToggle = useCallback( () => setIsVisible(!isVisible), [isVisible, setIsVisible] ) ... const visibility = isVisible ? 'unset' : 'hidden' return ( <> ... <Button onClick={handleVisibilityToggle}>GO</Button> <CalendarIcon id="calendar" visibility={visibility}/> </> ) }si desea limpiar cómo se usa ese código y abstraer la lógica a un gancho de visibilidad, se vería así
function useVisibilityToggle(defaultValue = false) { const[isVisible, setIsVisible] = useState(defaultValue) const toggleVisibility = useCallback( () => setIsVisible(!isVisible), [isVisible, setIsVisible] ) const visibility = isVisible ? 'visible' : 'hidden' return [visibility, toggleVisibility] } function MyComponent() { const [visibility, toggleVisibility] = useVisibilityToggle(false) return ( <> ... <Button onClick={toggleVisibility}>GO</Button> <CalendarIcon id="calendar" visibility={visibility}/> </> ) }Consulte el primer ejemplo aquí: https://reactjs.org/docs/hooks-state.html
function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Eso debería mostrarle cómo manipular el estado cuando se hace clic en el botón. A continuación, quería mostrar/ocultar algo cuando se hace clic en ese botón.
Primero cambiemos ese useState a uno booleano, entonces
const [hidden, setHidden] = useState(false); Luego podemos cambiar el botón para que use el estado anterior para configurar el nuevo. Nunca debe usar el hidden en setHidden , sino pasarle una función, que obtiene el valor anterior como parámetro.
<button onClick={() => setHidden(prevHidden => !prevHidden)}>Y ahora queremos usar ese valor, así que podemos agregar algo debajo del botón:
{ !hidden ? (<p>This text is visible</p>) : (<></>) }Ejemplo de trabajo: https://codesandbox.io/s/strange-williamson-wuhnb?file=/src/App.js
Parece que su código está tratando de crear un enlace personalizado, eso es algo más avanzado, y si es muy nuevo en React, no lo necesitará en este momento.
Su objetivo principal es mostrar el componente CalendarIcon visible cuando hace clic en el botón GO .
Por lo tanto, necesita un estado, digamos una variable visible para controlar esto. Puede actualizar este estado al hacer clic en su Button como se muestra a continuación a true o false , y hacer que visibility="visible" siempre.
Cuando sea visible , true su CalendarIcon .
const [visible, toggleVisibility] = useState(false) <Button onClick={()=> toggleVisibility(!visible)}>GO</Button> {visible && <CalendarIcon id="calendar" visibility="visible"/>}