单击反应时按钮无法按预期工作

Question

import React from 'react'

const Support = () => {
  
  return (
    <div>
      <button onClick={()=>console.log('support')}>add</button>
    </div>
  )
}

这是一个简单的按钮，它没有登录 onclick 。

尝试使用清单中的以下图标时出错：http://localhost:3000/logo192.png（下载错误或资源不是有效图像）-我进入控制台时出错，不知道它是否相关。

我还直接渲染到index.js而不是app中，我认为它与此相关。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

我尝试在各个组件中添加按钮并尝试单击，但它不起作用。

Answer 1

调试完你的代码后，我发现了 CSS 方面的问题，这里是相同的解决方案。

从

fixed

组件中的此

div

中删除

Home.js

关键字以使其正常工作...

=> 替换这个....

<div className="fixed inset-y-0 z-50 h-full w-64 flex-col">
  <SideBar />
</div>;

=> 对此....

<div className="inset-y-0 z-50 h-full w-64 flex-col">
  <SideBar />
</div>;

更改后，您的

Home.js

组件将如下所示：

import { useState } from "react";
// import Login from "./components/Login";
import SideBar from "./SideBar";
import { Outlet, useNavigate } from "react-router-dom";

import { history } from "../utils/helper";
import Login from "./Login";

function Home() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  history.navigation = useNavigate();

  return !isLoggedIn ? (
    <Login setIsLoggedIn={setIsLoggedIn} />
  ) : (
    <div className="flex">
      <div className="inset-y-0 z-50 h-full w-64 flex-col">
        <SideBar />
      </div>
      <div className="relative ml-40 p-2">
        <Outlet />
      </div>
    </div>
  );
}

export default Home;

我不知道这背后的主要原因是什么，但是这个

fixed

关键字不允许我们点击按钮，您可以根据您的CSS样式更详细地检查这一点。

如果您有任何疑问，请告诉我。