reflux+react 웹 세 번째 쓰기

1380 단어
// store  Reflux.listenTo(store, )
			// mixins reflux.listenTo store 
			var TodoComponent=React.createClass({
				mixins:[Reflux.listenTo(TodoStore,'onStatusChange')],
				getInitialState:function(){
					return {list:[],text:''}
				},
				onStatusChange:function(list){
					this.setState({list:list})
				},
				componentDidMount:function(){					
        			TodoActions.getAll({pid1:123,pid2:141});
				},
				onChangeText:function(ev){
					//this.setState({text:ev.target.value});
					// refs getDOMNode() 
					this.setState({text:this.refs.reftext.value})
				},
				onAddItem:function(){
					var data={userName:this.state.text};
					TodoActions.addItem(data);
					this.setState({text:''})
				},
				render:function(){
					return (
						 <div>
			                {this.state.list.map(function (item,index) {
			                    return <p key={index}>{item.userName}</p>
			                })}
			                <input type="text" value={this.state.text} onChange={this.onChangeText}  ref="reftext" />
			                <button onClick={this.onAddItem}> </button>
			            </div>	
					);
				}
			})

mixins:[Reflux.listenTo(TodoStore,'onStatusChange')]
이렇게 하면 listenTo 감청 방법을 쓸 필요가 없다.
직접 첫 번째 렌더링 후 동작을 호출하여 데이터를 가져오면 됩니다.

좋은 웹페이지 즐겨찾기