onClick 不触发事件 React.js

Question

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

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

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

App.js

document.addEventListener("click", (e) => {
 console.log(e);
 console.log(e.target);
});

index.js

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



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

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

Answer 1

你会找到你的答案

onClick={( )=>{openSidebar( )}}

Answer 2

好的我已经解决了，问题在context.js

的括号里

这里是旧代码：

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

);

这是新的：

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

我需要将 () 替换为 {}

onClick 不触发事件 React.js

onClick doesn't fire event React.js

javascript

event-handling

dom-events

reactjs