滕不瘦
2021-06-09 03:01
采纳率: 100%
浏览 135

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配置的问题?球球大佬们救救我吧 !!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 已采纳

    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
    点赞 1 打赏 评论
  • 颜人中是 2021-06-09 08:55

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

    点赞 打赏 评论
  • 有问必答小助手 2021-06-10 14:04

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

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

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

    点赞 打赏 评论

相关推荐 更多相似问题