为什么侧边栏的按钮无法点击？

Question

侧边栏上的按钮不可点击。在我的主页上，按钮元素工作清晰，但在侧边栏上，它不起作用。

import { useContext, TouchableOpacity } from "react";
import { DataContext } from "../App";
import "./SideBar.css";

    const SideBar = () => {
      const [showModal, setShowModal] = useContext(DataContext);
      return (
        <div
          className={showModal ? "modal-dialog show" : "modal-dialog"}
          role="document"
        >
          <div className="sideBar">
            <div className="sideBarHeader">
              <h5>Add City</h5>
              <button >
                Trial
              </button>
            </div>
          </div>
        </div>
      );
    };
    export default SideBar;

Answer 1

您必须为您的按钮提供点击事件

Answer 2

请在按钮 onCLick 上添加单击处理程序，这是您的更新代码：

import { useContext } from "react";
import { DataContext } from "../App";
import "./SideBar.css";

const SideBar = () => {
  const [showModal, setShowModal] = useContext(DataContext);

  const handleClick = () => {
    // Handle button click logic here
    console.log("Button clicked!");
  };

  return (
    <div
      className={showModal ? "modal-dialog show" : "modal-dialog"}
      role="document"
    >
      <div className="sideBar">
        <div className="sideBarHeader">
          <h5>Add City</h5>
          {/* Ensure button has onClick event handler */}
          <button onClick={handleClick}>
            Trial
          </button>
        </div>
      </div>
    </div>
  );
};

export default SideBar;