onClick 事件在 React 中渲染后触发

Question

我有一个反应侧边栏菜单，当单击此侧边栏中的按钮时，我想更新变量的状态。然而，该事件在渲染时触发，而不是等待点击，非常感谢您的帮助！

侧边栏

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>
        </>
    );

状态的设置位置：

const [x, setX] = useState([]);

    const funx = (e) => {
        console.log(e);
        setX(e);
        
    }

我想补充一点，如果我e从 中删除参数funx，并且仅funx在我的菜单中调用，则 onclick 事件似乎工作正常。不过我想通过 1/2/3/等等。取决于点击的内容

Answer 1

onClick={funx(1)}括号内的代码是在渲染时计算的，因此您实际上是在调用该函数。您想要传递函数引用。如果你需要通过1你可以这样做：

 <MenuItem onClick={() => funx(1)} ...>