Tengo un menú de barra lateral en reaccionar, cuando se hace clic en los botones de esta barra lateral, quiero actualizar el estado de una variable. Sin embargo, el evento se dispara en el renderizado en lugar de esperar un clic, ¡ayuda muy apreciada!
barra lateral
return ( <> <div id="container1"> <ProSidebar id='tester1'> <SidebarHeader> <h1>Header Title</h1> </SidebarHeader> <SidebarContent> <Menu iconShape="square"> <MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem> <MenuItem icon={<FaList className='sideBarIcon'/>}></MenuItem> <MenuItem icon={<FaRegHeart className='sideBarIcon'/>}></MenuItem> <MenuItem icon={<RiPencilLine className='sideBarIcon'/>}></MenuItem> <MenuItem icon={<BiCog className='sideBarIcon'/>}></MenuItem> </Menu> </SidebarContent> <SidebarFooter> <Menu iconShape="square"> <MenuItem icon={<FiLogOut />}>{x}</MenuItem> </Menu> </SidebarFooter> </ProSidebar> </div> </> );Y donde se establece el estado:
const [x, setX] = useState([]); const funx = (e) => { console.log(e); setX(e); } Me gustaría agregar si elimino el parámetro e de funx y solo llamo a funx en mi menú, el evento onclick parece estar funcionando bien. Sin embargo, quiero pasar 1/2/3/etc. dependiendo de lo que se haga clic
onClick={funx(1)} el código dentro de los corchetes se evalúa en el renderizado, por lo que en realidad estás llamando a la función. Desea pasar una referencia de función. Si necesitas pasar el 1 podrías hacer:
<MenuItem onClick={() => funx(1)} ...>En lugar de configurar la función del controlador de eventos onClick como <MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>
Tienes que cambiar el código como se muestra a continuación:
<MenuItem onClick={() => funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>O puede modificar la función del controlador de eventos como se muestra a continuación:
const funx = (value) = (event) => { console.log(value); setX(value); }Ahora puede llamar a la función de la siguiente manera:
<MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>