handleClick不起作用
这是一个处理点击的简单反应文件：
//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;
按钮呈现没有问题，但点击时没有任何反应。 我想这意味着服务器端的渲染工作，但客户端渲染不起作用？ 我使用grunt和browserify，这是我的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']);
};
然后我确认src / react / components / list.js中的代码被内置到/public/js/react/main.js中。 那么问题是什么呢？ 任何帮助表示赞赏！
http://plnkr.co/edit/lJ2aWzvcR2vQ6PVuneqK?p=preview
我在plnkr上试了一下，效果很好（打开Chrome控制台或Firebug实际看到，当你点击按钮时，会抛出console.error ）。
也许在你身边的是require('react/addons')不工作？ 如果您已经将React作为全局变量，那么这个require就是我认为您的问题的根源。