javascript - onClick 不会触发事件 React.js

Question

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

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

   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被完全忽略。

标签： javascriptreactjsevent-handlingdom-events

Answer 1

你会在这里找到你的答案

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