2016年04月19日

React+ES6でTODOリスト

React+ES6でTODOリスト作ってみた。
import React, { PropTypes } from 'react';
import {render} from 'react-dom';
//Conter Component
class TodoAdd extends React.Component {
_onAddToDo(){
var newTodo = this.refs.todo.value.trim();
this.props.onAddToDo(newTodo);
this.refs.todo.value="";
}
render () {
return (
<div>
<input type="text" ref="todo" />
<input type="button" value="submit" onClick={this._onAddToDo.bind(this)} />
</div>
)
}
}
//Countup Component
class TodoList extends React.Component {
_onDeleteToDo(i){
this.props.onDeleteToDo(i);
}
render () {
return (
<ul>
{this.props.todos.map((todo,i)=>{
if(todo.flag){
return <li onClick={this._onDeleteToDo.bind(this,i )}>{todo.todo}</li>
}else{
return <li onClick={this._onDeleteToDo.bind(this,i )}><s>{todo.todo}</s></li>
}
})}
</ul>
)
}
}
//App Component
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {todos: this.props.initialTodos};
}
onAddToDo(newTodo){
this.setState({
todos : this.state.todos.concat([{todo:newTodo,flag:true}])
});
}
onDeleteToDo(i){
this.state.todos[i].flag=false;
this.setState({
todos : this.state.todos
});
}
render () {
return (
<div>
<TodoAdd onAddToDo={this.onAddToDo.bind(this)}/>
<TodoList onDeleteToDo={this.onDeleteToDo.bind(this)} todos={this.state.todos}/>
</div>
)
}
}
Todo.defaultProps = {initialTodos: [{todo:"foo",flag:true},{todo:"bar",flag:false}]};
//render
render(
<Todo />,
document.getElementById('app')
);
タグ:REACT
posted by ねこまんま at 14:37 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/436858441
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック