React无法触发onClick事件（用了官方文档里的案例且无报错信息）

粘贴了无数现成案例都没法儿触发onClick！！！

最终效果如图：（点了按钮没输出也没报错）

项目文件结构如图：

index.js里的代码如下：（从React官方文档粘贴的代码）

import React from 'react'

import ReactDom from 'react-dom'

class Foo extends React.Component {

    constructor(props) {

      super(props);

      this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {

      console.log('Click happened');

    }

    render() {

      return <button onClick={this.handleClick}>Click Me</button>;

    }

  }

ReactDom.render(<div>

    <Foo></Foo>

</div>, document.getElementById('container'))

index.html里的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='container'></div>
    <script src="../main.js"></script> 
</body>
</html>

webpack.config.js里的代码如下：

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')//导入在内存中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),
    filename: 'index.html'
})
module.exports = {
    mode: "development",//development開發模式 不壓縮代碼 production產品模式 壓縮代碼
    devServer: {
        port: 8000,
        open: true //在浏览器自动打开
    },
    plugins: [//在配置文件中创建一个plugins节点 在节点中new一个htmlplugin插件
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader"
                // options: { presets: ["@babel/env"] }
            }, {
                test: /\.css$/,
                use: ["style-loader" ,"css-loader?modules"]
            }

        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],//表示这几个文件的后缀名可以不写 顺序必须从前往后
        alias: {
            '@': path.join(__dirname, './components')//@表示项目根目录中src的这层路径 join拼接出的是绝对路径
        }
    },
    devtool: 'inline-source-map'
}

难道是webpack配置的问题？球球大佬们救救我吧！！！

document.getElementById('container') id为'container的容器呢，还有这个是create-app一般不这么写，直接exports 组件然后再其他组件引入import以组件形式引入或者直接路由显示

import React, { Component, useState, useEffect } from 'react';

import ReactDom from 'react-dom'



class Index extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
 
        console.log('Click happened');
   
    }
    render() {
        return (
            <div>
              <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
    }

}

ReactDom.render(<div>
 
    <Index></Index>
 
</div>, document.getElementById('root'))
// export default Index


//这种
import React, { Component, useState, useEffect } from 'react';

import ReactDom from 'react-dom'



class Index extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
 
        console.log('Click happened');
   
    }
    render() {
        return (
            <div>
              <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
    }

}


export default Index

,改成()=>{this.handleClick()}

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632