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

其他代碼應該不具有參考價值了，想問一下大神這是為什么，想了半天也試了半天還是沒搞出來，謝謝了。

總結

以上是生活随笔為你收集整理的flux读取不到数据_初学flux的疑问？无法添加数据到DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。