如何解决React onClick 在我的任何浏览器中都不起作用,但对于同事来说却是
我在一个非常简单的 React 函数组件中创建了一个 onClick
处理程序:
export default function MyButton() {
return (
<button
onClick={() => {
console.log('test');
}}
>
Button
</button>
);
}
现在奇怪的部分是:无论我使用什么浏览器,事件都不会触发。我已经创建了数百次这样的组件,到目前为止一切都很好。
对于其他人,此代码按预期工作。
我无法共享整个项目或示例存储库。它实际上只是一个随处可见的简单 React 应用。
它无法在我的系统上运行的原因是什么?
编辑:
错误出在纱线内部。我调用了 webpack-dev-server -d source-map --mode=development
进行开发,我正在使用 "webpack-dev-server": "^4.0.0-beta.0"
。我认为缓存可能以某种方式损坏了。
为了修复它,我删除了我的输出目录并使用 npm
而不是 yarn
启动脚本。这样它就起作用了,即使我再次使用 yarn
也是如此。
我真的不知道为什么会这样。很高兴知道原因。
解决方法
使用命名函数代替匿名函数。命名函数对于确定哪些函数在开发过程中以及从用户检索日志时导致错误非常有用。
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
,我也遇到了同样的问题,问题的原因(在我的情况下,可能是你的)是 HtmlWebpackPlugin,HtmlWebpack 插件在 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 上阅读了一篇关于这个问题的帖子,他也有同一个包的多个脚本,他遇到了同样的问题),我通过删除解决了这个问题我的脚本标签,但我们可以使用 copywebpack 插件来复制 html。或者其他解决方案是配置 htmlwebpackplugin 很糟糕,它不会注入任何附加标签
...
new HtmlWebpackPlugin({
name: "index.html",inject: false,template: path.resolve(__dirname,"public/index.html"),}),...
,
尝试将您的函数输入为 React.FC。
创建一个打字稿 (tsx) 文件并使用即将到来的代码:
import React from "react";
export const MyButton: React.FC = () => {
return (
<button
onClick={() => {
console.log("test");
}}
>
Button
</button>
);
};
请注意,使用此代码,您正在输入组件,确保您的函数输入为 React.FunctionComponent。
,你有没有在你的文件中导入这个,如果没有,那么在顶部添加这个 tine
从'react'导入React;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。