flux读取不到数据_初学flux的疑问?无法添加数据到DOM

我初学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;

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值