React onClick 在我的任何浏览器中都不起作用，但对于同事来说它可以

Question

我在一个非常简单的 React 函数组件中创建了一个 onClick 处理程序：

export default function MyButton() {
   return (
      <button
         onClick={() => {
            console.log('test');
         }}
      >
         Button
      </button>
   );
}

现在奇怪的是：无论我使用什么浏览器，事件都不会触发。我已经创建了数百次这样的组件，直到现在一切都很好。

对于其他人来说，这段代码可以正常工作。

我无法共享整个项目或示例存储库。它真的只是一个随处可见的简单 React 应用程序。

为什么它不能在我的系统上运行？

编辑：

错误出在 yarn 中。我调用 webpack-dev-server -d source-map --mode=development 进行开发，我正在使用 "webpack-dev-server": "^4.0.0-beta.0"。我认为缓存可能以某种方式损坏了。

为了修复它，我删除了输出目录并使用 npm 而不是 yarn 启动脚本。这样它就起作用了，即使我再次使用 yarn。

我真的不知道为什么会这样。很高兴知道为什么。

Answer 1

你有没有在你的文件中导入这个，如果没有，那么在上面添加这个尖齿

从 'react' 导入 React；

Answer 2

尝试将您的函数键入 React.FC。

创建 typescript (tsx) 文件并使用即将发布的代码：

import React from "react";

export const MyButton: React.FC = () => {
  return (
    <button
      onClick={() => {
        console.log("test");
      }}
    >
      Button
    </button>
  );
};

请注意，使用此代码时，您正在输入组件，确保您的函数输入为 React.FunctionComponent。

Answer 3

使用命名函数而不是匿名函数。命名函数对于识别在开发过程中导致错误的函数以及从用户那里检索日志时非常有用。

import React from "react";

export default function MyButton() {
  const handleChange = () => {
    console.log("test");
  };
  return <button onClick={handleChange}>Button</button>;
}

最好为所有函数命名，以获得更好的开发人员调试（和开发）体验，而匿名函数不提供这种体验。

有关命名函数和匿名函数之间的更多说明 Learn the benefits of Named vs Anonymous function here

Answer 4

我也遇到了同样的问题，问题的原因（在我的情况下，可能是你的）是 HtmlWebpackPlugin，HtmlWebpack Plugin 在 index.html 的 head 标签中添加了 bundle 的附加脚本标签。

我的html

<html>
  <head>
    <title>my-react-app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

htmlwebpackplugin 生成html

<html>
  <head>
    <title>my-react-app</title>
  <script defer src="bundle.js"></script></head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

因为这个额外的脚本标签，react 出现了问题（我在 reddit 上读到 post 关于这个问题，他也有同一个包的多个脚本，他遇到了同样的问题），我通过删除脚本标签解决了这个问题，但是我们可以使用 copywebpack 插件来复制 html。或者其他解决方案是配置 htmlwebpackplugin suck a way that it will not inject any additional tags

...
    new HtmlWebpackPlugin({
      name: "index.html",
      inject: false,
      template: path.resolve(__dirname, "public/index.html"),
    }),
...

React onClick 在我的任何浏览器中都不起作用，但对于同事来说它可以

React onClick not working in any of my browsers, but for colleagues it does

reactjs

npm

webpack

webpack-dev-server

yarnpkg

我的html

htmlwebpackplugin 生成html