初学flux的疑问？无法添加数据到DOM

Question

我初学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 (
            <section className="form-horizontal">
                   <hr/>
                   <div className="form-group">
                    <label className="col-sm-2 control-label">Name</label>
                    <div className="col-sm-10">
                      <input type="text" ref="name" className="form-control" placeholder="name" />
                    </div>
                </div>
                <div className="form-group">
                    <label className="col-sm-2 control-label">Age</label>
                    <div className="col-sm-10">
                      <input type="number" ref="age" className="form-control" placeholder="age" />
                    </div>
                </div>
                <div className="form-group">
                    <label className="col-sm-2 control-label">Job</label>
                    <div className="col-sm-10">
                      <input type="text" ref="job" className="form-control" placeholder="job" />
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <button type="button" className="btn btn-info" onClick={this._onSubmit}>提交</button>
                    </div>
                </div>
            </section>
        );
    }
});

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 (
                <tr key={i}>
                    <td>{item.name}</td>
                    <td>{item.age}</td>
                    <td>{item.job}</td>
                </tr>
            );
        });
        return (
            <div>
                <table className="table tablw-striped table-border table-hover">
                    <thead>
                        <tr className="info">
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>职业</th>
                        </tr>
                    </thead>
                    <tbody>
                        {itemHtml}
                    </tbody>
                </table>
                <FormGroup />
            </div>
        );
    }
});

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;

其他代码应该不具有参考价值了，想问一下大神这是为什么，想了半天也试了半天还是没搞出来，谢谢了。

Answer 1

好吧，今天我重新试了一下，发现问题是

componentDidMount: function(){
        TableStore.addChangeListener(this._onChange());
    },
    componentWillUnmount: function(){
        TableStore.removeChangeListener(this._onChange());
    },

其中的this._onChange()不能加括号，应该写成this._onChange这样，好吧，这坑猝不及防。另外组件架构已经重新改过了，与问题无关就不在更新了。还有就是发现好多样例的stroe用得都是EventEmitter，我原先想试试用jquery行不行后来发现并不能凑效，遂放弃，如果有使用jquery开发这一块经验的朋友欢迎交流。在此谢过。

Answer 2

jQuery中的事件处理是JavaScript内建事件的扩充。不能用在这里的原因如下:

JavaScript内建的Event、CustomEvent等介面，以及addListener、dispatch等方法，只能实作在具有事件介面的网页DOM元素上。单纯在JavaScript的物件上是没有办法使用，像这里的store就是，要靠额外的函式库才能这样作。这是一定要使用像EventEmitter这种函式库的主要原因。

既然问题已解决，以上供参考