Reactjs React-onClick事件未触发或更新

我是新来的。我已经下载并安装了本“CSS模块和反应”教程中的代码：-

教程：

代码：

据我所知，下载的代码基本上可以正常工作，但我无法在组件内部获得简单的onClick事件

我尝试了在互联网上找到的所有建议，但没有一个对我有效。你能帮我把它修好吗。多谢各位

package.json：-

{
  "name": "css-tricks-modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors",
    "start": "webpack && npm run dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "browser-sync": "^2.12.8",
    "browser-sync-webpack-plugin": "^1.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0",
    "static-site-generator-webpack-plugin": "^2.0.1",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": ""
}

webpack.config.js：-

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin'),
    BrowserSyncPlugin = require('browser-sync-webpack-plugin'),
    data = require('./data.js'),
    path = require('path');

module.exports = {
    entry: './src/router',
    output: {
        path: './build',
        filename: 'bundle.js',
        libraryTarget: 'umd',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                // include: __dirname + '/src',
                include: path.join(__dirname,'src'),
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
                // include: __dirname + '/src'
                include: path.join(__dirname,'src')
            }
        ],
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new StaticSiteGeneratorPlugin('main', data.routes, data),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'http://localhost:8080/'
        })
    ]
};

Home.js：-

import React from 'react'
import CoolButton from '../components/Button/Button'
import Counter from '../components/counter'
import App from '../components/app'
import App2 from '../components/app2'
import SayHello from '../components/sayHello'

export default class Home extends React.Component {
  render() {
    return (
        <div>
            <h1>Home page</h1>
            <p>This is a home page</p>
            <App />
            <App2 />
            <SayHello />
            <CoolButton text='A super cool button'/>
        </div>
    )
  }
}

从“React”导入React
从“../components/Button/Button”导入CoolButton
从“../components/Counter”导入计数器
从“../components/App”导入应用程序
从“../components/App2”导入App2
从“../components/SayHello”导入SayHello
导出默认类Home扩展React.Component{
render（）{
返回(
主页
这是一个主页

)
}
}

sayHello.js（onClick事件不起作用）：-

从“React”导入React
导出默认类SayHello扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
log（“你好！！！”）；
警惕（“你好！！！！”）；
}
render（）{
返回(
打招呼
);
}
}

app.js（onClick事件不工作）：-

从“React”导入React
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：'初始数据…'
}
this.updateState=this.updateState.bind（this）；
};
房地产（）{
this.setState（{data:'data updated！！！'}）
}
render（）{
返回(
点击
{this.state.data}
);
}
}

app2.js（onClick事件不工作）：-

从“React”导入React；
导出默认类App2扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={istogleon:true}；
//此绑定是使`This`在回调中工作所必需的
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（prevState=>({
isToggleOn:！prevState.isToggleOn
}));
}
render（）{
返回(
{this.state.isToggleOn？'ON'：'OFF'}
);
}
}

代码编译时没有错误，在组件“SayHello”和“App2”中，它们的初始状态文本被呈现，但它们的onClick事件没有发生，或者数据没有更新。我认为最有可能的事件是没有发射，但我不确定

---

如果您能就问题发生的位置/原因以及如何解决提供建议，我将不胜感激。谢谢。

我创建了一个新的React项目，添加了Home.js、App.js、App2.js和SayHello.js文件（以及一个index.js文件，我在其中渲染整个内容）。所有的onclick都很好用。您是否正在使用本地npm服务器进行测试？它通常会向您显示一些关于正在发生的事情的有用信息。此外，我建议您使用React-dev tools chrome扩展，您可以选择应用程序并查看所有组件的状态等。嗨，Eyfl，非常感谢您的帮助。。是的，我正在使用npm服务器。。是否有npm命令用于获取有关此问题的信息？以下是我在完成项目后获得的所有信息：-“警告：通过React主包访问PropTypes已被弃用，并将在React v16.0中删除…警告：通过React主包访问createClass已被弃用，并将在React v16.0中删除…今晚早些时候，我在localhost:3000上尝试使用React Dev工具进行此演示项目，收到消息说：“此页面似乎没有使用React”。除了加载页面（localhost:3000）然后单击页面右上角的React-Dev-Tools图标之外，我还需要执行其他操作吗？那么肯定有问题，图标应该是蓝色（如果页面上的React处于生产模式）或红色（如果处于开发人员模式）。您是如何创建应用程序的？请尝试按照Facebook上负责React的人员的简单步骤进行操作，您应该能够轻松地修改它以满足您的需要：谢谢Eyfl，我将查看您提供的Facebook链接..我使用的Css模块演示代码在webpack.config.js中有以下几行代码“StaticSiteGeneratorPlugin=require（'static-site-generator-webpack-plugin'）和“new StaticSiteGeneratorPlugin（'main'，data.routes，data）”…静态站点生成的代码是否意味着它不再是react网页？我对这一点非常陌生，发现很多东西很难使用。再次感谢。

import React from 'react'

export default class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log("Hello!!!");
    alert("Hello!!!!");
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

import React from 'react'

export default class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated!!!'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

import React from 'react';

export default class App2 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}