handleClick not working

Here's a simple react file that handles click:

//src/react/components/list.js
/** @jsx React.DOM */
var React = require('react/addons');
var List = React.createClass({
  displayName: 'List',

  handleClick: function() {
    console.error('click');
    var resultData = {
      name: 'test',
      version: '0.0.1'
    };
  },

  render: function() {
    return (
      <div>
        List
        <button onClick={this.handleClick}>Add</button>
      </div>
    );
  }
});

module.exports = List;

Button renders with no problem but nothing happens when I clicked it. I suppose it means server-side rendering works but client-side rendering is not working? I'm using grunt and browserify, and this is my Gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    browserify: {
      client: {
        src: ['src/react/**/*.js'],
        dest: 'public/js/react/main.js'
      },
      options: {
        debug: true,
        transform: ['reactify']
      }
    },
    watch: {
      js: {
        files: ['src/react/**/*.js'],
        tasks: ['browserify']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.registerTask('default', ['browserify', 'watch']);
};

And then I confirmed code in src/react/components/list.js is built into /public/js/react/main.js. So what could the problem be? Any help is appreciated!

---

http://plnkr.co/edit/lJ2aWzvcR2vQ6PVuneqK?p=preview

I tried it on plnkr, and it works well (open Chrome Console or Firebug to actually see that when you click the button, a console.error is thrown).

Maybe on your side is the require('react/addons') that is not working ? If you already have React as a global variable, this require is the source of your problems I think.

链接地址: http://www.djcxy.com/p/52106.html

上一篇: Browserify使用grunt ReacjJS和yii2供应商路径

下一篇: handleClick不起作用