时间戳

首页 > 解决方案 > 部署时反应onClick函数未执行

reactjs - 部署时反应onClick函数未执行

问题描述

我创建了一个函数来在单击图像时更改 div 标签的类。从表面上看，它只是在单击汉堡图标时显示一个下拉菜单。这在开发模式下工作，但在部署在静态服务器上时不在部署模式下。

import React, { useState }  from 'react';
import Hamberger from '../media/ohUdyBk.png';
import Jetnet from '../media/jetnet.png';

function Topbar() {

  const [statusDropdown, setState] = useState("Hiddenbanner");

  return (
    <div>
      <div className="Menubar">
        <span>
          <img onClick={() => statusDropdown === "Hiddenbanner" ? setState("Backbanner") : setState("Hiddenbanner")} src={Hamberger} alt="hamberger" className="Hamberger" style={{ cursor: "pointer" }} />
        </span>
        <span>
          <img src={Jetnet} alt="jetnet" className="Jetnet" style={{ cursor: "pointer" }} />
        </span>
      </div>
      <span className={statusDropdown}>
        <div>
        <a href="https://google.com">Link1</a>
        </div>
        <div>
        <a href="https://google.com">Link1</a>
        </div>
        <div>
        <a href="https://google.com">Link1</a>
        </div>
      </span>
    </div>
  );
}

export default Topbar;

这是我的 package.json

{
  "name": "secure_portal",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-transition-group": "^1.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

标签： reactjs

解决方案

我认为您应该稍微改变方法以更好地切换。尝试这个

const [showHiddenBanner, setShowHiddenBanner] = useState(true);

<img onClick={() => showHiddenBanner(!showHiddenBanner} src={Hamberger} alt="hamberger" className="Hamberger" style={{ cursor: "pointer" }} />

然后在你的代码中你可以这样做

{ showHiddenBanner ? <HiddenBanner /> : <DisplaySomethingElse />

推荐阅读