在 React 中渲染后触发 onClick 事件

Question

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

边栏

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

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

Answer 1

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

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

Answer 2

而不是像<MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>

那样设置onClick事件处理函数

您必须更改下面给出的类似代码：

 <MenuItem onClick={() => funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>

或者您可以修改事件处理函数，如下所示：

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

现在您可以调用函数如下：

<MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>

在 React 中渲染后触发 onClick 事件

onClick event firing off after render in React

javascript

state

sidebar

reactjs