#Componente de botón reutilizable
raven parrot
Cuando estés en la PC envíanos un ejemplo o muéstranos el código a ver si te podemos ayudar.
Con lo que cuentas aquí, aún no entiendo porque quisieras hacer esto.
De momento se me ocurre esto:
const CustomComponet = ({ onClick }) => (<button onClick={onClick} />)
fierce linden
la segunda y la tercera imagen son el componente que estoy haciendo
el problema esta en la segunda imagen, no me acepta el onclick. lo que quiero es encontrar la forma de detectar cuando se le da un click al boton que me pasan por parametro
twin silo
stoic mesa
No estoy 100% seguro, pero me parece que eso no funciona como vos crees. Cuando le pasas la referencia por parámetro lo que conseguís son los datos de esa referencia pero no la referencia en si misma. Y como react es onewaydatabinding, ese cambio que haces en el componente, cuando le agregas el onClick, no se traduce a un cambio hacia arriba del árbol. Si quisieras hacer algo como eso tendrías que pasarlo como children, usar un context o algo del estilo. De nuevo, puedo estar equivocado con lo que dijo.
fierce linden
Entiendo
raven parrot
Coincido un poco con lo que dice @stoic mesa, creo que para lograr lo que quieres es mejor usar un context.
Puedes crear dentro del context un estado, por ejemplo:
const [isClicked, setIsClicked] = useState(false)
En el componente donde te interese hacer el "trigger" del click, usas el conexto, por ejemplo:
const { setIsClicked } = useContext(yourContext)
handleClick() {
setIsClicked(true)
}
En el componente donde quieras reaccionar ante ese evento, puedes hacer lo siguiente:
const { isClicked } = useContext(yourContext)
useEffect(() => {
if (isClicked) {
// ... do something
}
}, [isClicked])
Por otro lado se me ocurre para mantener lo que ya tienes hecho (lo cual no lo mantendría, me parece que hay mejoras formas de hacer lo que quieres).
Creo que estás ejecutando mal el método click, en vez de utilizar .onclick debería ser .click sin el "on"
Y si te sigue sin funcionar, probablemente en el momento que estás ejecutando ese click, el useRef aún no tiene la referencia al elemento que quieres.
Por lo cual, para asegurarte puedes usar el useEffect:
useEffect(() => {
if (referens.current) {
referens.current.click(() => ...)
}
}, [referens.current])
Pero te repito aunque funcione con tu código actual, yo lo refactorizaría a un context o algo más legible y escalable