不射击js事件在webpack中的建立反应应用
不射击js事件在webpack中的建立反应应用
提问于 2021-02-17 17:04:33
剧透:我倾向于Webpack的问题，而不是反应(因为一个简单的反应应用程序，直接从create-react-app的事情起作用)。不过，这只会有反应..。
主要问题是一个简单的事件(例如，onClick永远不会被执行)，这扩展到没有使用js (手风琴，复杂的导航行为等等)。因此，以下内容不起作用：
<button onClick={() => alert("TEST YEAH!")}>Click Me!</button>在使用库的Button组件(如react-bootstrap或semantic-ui-react (在这两个库中都进行了测试)时也是如此。
webpack配置如下：
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "./bundle.js"
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};package.json是：
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"eslint": "^7.19.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^1.7.0",
"html-webpack-plugin": "^4.5.1",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
}您可以在这里，在密码箱里中找到最小的示例。只需单击该按钮，就可以看到没有显示警报。此外，还有一些Accordion组件的注释代码，这些代码显然无法工作。
我在想..。关于为什么会发生这种事有什么建议吗？我的一些想法是函数的绑定，代码的注入(但是alert出现在bundle.js文件中).提前感谢！
编辑解决方案
删除主html中包含的包。由于它是自动添加的，所以它被添加了两次并造成了问题。
- <script src="./bundle.js"></script>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-23 08:42:37
我也有同样的问题，请检查index.html文件并删除script标记。如果使用的是html-webpack-plugin，脚本标记将自动添加到html文件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66246652
复制相关文章
相似问题
腾讯云开发者
