React - onClick事件未触发或更新

Question

我是React的新手。我已经从这个＆＃34; CSS模块和React＆＃34;下载并安装了代码。教程： -

教程：https://css-tricks.com/css-modules-part-3-react/

代码：https://github.com/robinrendle/react-css-modules-boilerplate

下载的代码基本上可以正常工作，但是我无法在组件内部使用简单的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>
    )
  }
}

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

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>
    );
  }
}

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

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>
      );
   }
}

app2.js（onClick事件无效）： -

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>
    );
  }
}

代码编译没有错误，在Components＆＃34; SayHello＆＃34;和＆＃34; App2＆＃34;它们的初始状态文本已呈现，但它们的onClick事件未发生或数据未更新。我认为事件很可能不会被解雇，但我不确定。

我非常感谢有关问题发生的位置/原因以及解决方法的建议。感谢。