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

我需要用 {} 替换 ()