Javascript onClick不'；t fire event React.js

我试图通过点击按钮来切换元素，但它并没有做任何事情。还要注意的是，代码被简化了，因为我不想复制整个应用程序，我只包含了我认为重要的部分。以下是代码：

Navbar.js..在这里，我尝试调用来自context.js文件的函数，我在其中设置了contextAPI

import { useGlobalContext } from "./context";    
const { openSidebar, openSubmenu, closeSubmenu } = useGlobalContext();
    <button className="btn toggle-btn" onClick={openSidebar}>

index.js

import App from "./App";
import { AppProvider } from "./context";



ReactDOM.render(
   <React.StrictMode>
    <AppProvider>
     <App />
    </AppProvider>
   </React.StrictMode>,
   document.getElementById("root")
);

从“/App”导入应用程序；
从“/context”导入{AppProvider}；
ReactDOM.render(
,
document.getElementById（“根”）
);

---

App.js中的事件侦听器正确显示event以及按钮event.target。但是，我没有从context.js获取任何控制台日志，它应该记录“测试”，而不是错误、警告，什么都没有

onClick

被完全忽略。

您将找到您的答案

---

onClick={（）=>{openSidebar（）}}

好的，我解决了它，问题在context.js的括号中

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const openSidebar = () => {
     console.log("test")
     setIsSidebarOpen(true);
 };
return (
     <AppContext.Provider value={(isSidebarOpen,  openSidebar, closeSidebar)}>
         {children}
     </AppContext.Provider>
 );
}

export const useGlobalContext = () => {
return useContext(AppContext);
};

export { AppContext, AppProvider };

以下是旧代码：

return (
 <AppContext.Provider value={(isSidebarOpen,  openSidebar, closeSidebar)}>
     {children}
 </AppContext.Provider>

返回(
{儿童}

))

这里有一个新的：

return (
    <AppContext.Provider value={{ isSidebarOpen,  openSidebar, closeSidebar }}>
        {children}
    </AppContext.Provider>
);

返回(
{儿童}
);

---

我需要用{}

替换（），它确实运行了函数，但现在我得到的openSidebar不是函数错误…试试这个onClick={（）=>{openSidebar}预期会有一个赋值或函数调用，而看到了一个表达式。我想在作为道具发送函数的上下文API中一定有问题，我不知道还有什么不对劲

return (
    <AppContext.Provider value={{ isSidebarOpen,  openSidebar, closeSidebar }}>
        {children}
    </AppContext.Provider>
);