onClick 不會觸發事件 React.js

Question

我正在嘗試通過單擊按鈕來切換元素，但它沒有做任何事情。 另請注意，代碼已簡化，因為我不想復制整個應用程序，我只包含了我認為重要的部分。 這是代碼：

1. Navbar.js ..在這里我嘗試調用 function 它來自我設置 contextAPI 的 context.js 文件

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

2. 上下文.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 };

3. 應用程序.js

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

4. 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>
);

我需要用 {} 替換 ()