我初学flux,照着网上的代码，尝试学习写了一个简单的添加数据表页面，如图：
我想实现的功能是在下方表单填写数据之后点击提交可以实时的在上方表格添加一条数据，现在碰到的问题是我点击提交毫无反应也没有报错。我的架构是这个样子的：
我试了几遍不知道问题在哪，我的表格和表单是分成两个组件的：
表单组件如下：
var React = require('react');
var FormAction = require('../actions/form-action');
var FormGroup = React.createClass({
_onSubmit: function(){
var name = this.refs.name.value,
age = this.refs.age.value,
job = this.refs.job.value,
data = {name: name, age: age, job: job};
FormAction.createComment({data: data});
},
render: function(){
return (
Name
Age
Job
提交
);
}
});
module.exports = FormGroup;
表格组件如下：
var React = require('react');
var FormGroup = require('./form-group');
var TableStore = require('../stores/table-store');
function getStateStore(){
return {
items: TableStore.getAll()
}
}
var TableApp = React.createClass({
getInitialState: function(){
return {items: TableStore.getAll()}
},
componentDidMount: function(){
TableStore.addChangeListener(this._onChange());
},
componentWillUnmount: function(){
TableStore.removeChangeListener(this._onChange());
},
_onChange: function(){
this.setState({items: TableStore.getAll()});
},
render: function(){
var items = this.state.items;
var itemHtml = items.map(function(item, i){
return (
{item.name}{item.age}{item.job});
});
return (
姓名年龄职业
{itemHtml}
);
}
});
module.exports = TableApp;
stores的代码如下：
var AppDispatcher = require('../dispatcher/app-dispatcher');
var $ = require('jquery');
var items = [];
var TableStore = {
getAll: function(){
return items;
},
addNewItem: function(data){
items.push(data);
},
emitChange: function(){
$(this).on('change');
console.log(items);
},
addChangeListener: function(callback){
$(this).bind('change', callback);
},
removeChangeListener: function(callback){
$(this).unbind('change', callback);
}
};
AppDispatcher.register(function(action) {
switch(action.actionType) {
case 'CREATE_COMMENT':
TableStore.addNewItem(action.data);
TableStore.emitChange();
break;
default:
}
});
module.exports = TableStore;
其他代码应该不具有参考价值了，想问一下大神这是为什么，想了半天也试了半天还是没搞出来，谢谢了。
