<script type="text/babel">
(() => {
const todos = [
{id: 0, title: 'Task 0', isDone: false},
{id: 1, title: 'Task 1', isDone: false},
{id: 2, title: 'Task 2', isDone: true}
];
function TodoItem(props){
return (
<li key={props.todo.id}>
<label>
<input type="checkbox"
checked={props.todo.isDone}
onChange={() => props.checkTodo(props.todo)}
/>
<span className={props.todo.isDone ? 'done' : ''}>
{props.todo.title}
</span>
</label>
</li>
);
}
function TodoList(props){
const todos = props.todos.map(todo => {
return(
<TodoItem
key={todo.id}
todo={todo}
checkTodo={props.checkTodo}
/>
);
});
return (
<ul>
{todos}
</ul>
);
}
class App extends React.Component {
constructor(){
super();
this.state = {
todos: todos
};
this.checkTodo = this.checkTodo.bind(this);
}
checkTodo(todo){
const todos = this.state.todos.map(todo => {
return {id: todo.id, title: todo.title, isDone: todo.isDone};
});
const pos = this.state.todos.map(todo=>{
return todo.id;
}).indexOf(todo.id);
todos[pos].isDone = !todos[pos].isDone;
this.setState({
todos: todos
});
}
render(){
return (
<div>
<h1>My Todo</h1>
<TodoList
todos={this.state.todos}
checkTodo={this.checkTodo}
/>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
})();
</script>
<script type="text/babel">
(() => {
const todos = [
{id: 0, title: 'Task 0', isDone: false},
{id: 1, title: 'Task 1', isDone: false},
{id: 2, title: 'Task 2', isDone: true}
];
function TodoItem(props){
return (
<li key={props.todo.id}>
<label>
<input type="checkbox"
checked={props.todo.isDone}
onChange={() => props.checkTodo(props.todo)}
/>
<span className={props.todo.isDone ? 'done' : ''}>
{props.todo.title}
</span>
</label>
<span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
</li>
);
}
function TodoList(props){
const todos = props.todos.map(todo => {
return(
<TodoItem
key={todo.id}
todo={todo}
checkTodo={props.checkTodo}
deleteTodo={props.deleteTodo}
/>
);
});
return (
<ul>
{todos}
</ul>
);
}
class App extends React.Component {
constructor(){
super();
this.state = {
todos: todos
};
this.checkTodo = this.checkTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
}
checkTodo(todo){
const todos = this.state.todos.map(todo => {
return {id: todo.id, title: todo.title, isDone: todo.isDone};
});
const pos = this.state.todos.map(todo=>{
return todo.id;
}).indexOf(todo.id);
todos[pos].isDone = !todos[pos].isDone;
this.setState({
todos: todos
});
}
render(){
return (
<div className="container">
<h1>My Todo</h1>
<TodoList
todos={this.state.todos}
checkTodo={this.checkTodo}
deleteTodo={this.deleteTodo}
/>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
})();
</script>
function TodoList(props){
const todos = props.todos.map(todo => {
return(
<TodoItem
key={todo.id}
todo={todo}
checkTodo={props.checkTodo}
deleteTodo={props.deleteTodo}
/>
);
});
return (
<ul>
{props.todos.length ? todos: <li>nothing to do</li>}
</ul>
);
}
class App extends React.Component {
constructor(){
super();
this.state = {
todos: todos
};
this.checkTodo = this.checkTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
}
deleteTodo(todo){
if (!confirm('are you sure?')) {
return;
}
const todos = this.state.todos.slice();
const pos = this.state.todos.indexOf(todo);
todos.splice(pos, 1);
this.setState({
todos: todos
});
}
function TodoItem(props){
return (
<li key={props.todo.id}>
<label>
<input type="checkbox"
checked={props.todo.isDone}
onChange={() => props.checkTodo(props.todo)}
/>
<span className={props.todo.isDone ? 'done' : ''}>
{props.todo.title}
</span>
</label>
<span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
</li>
);
}
function TodoList(props){
const todos = props.todos.map(todo => {
return(
<TodoItem
key={todo.id}
todo={todo}
checkTodo={props.checkTodo}
deleteTodo={props.deleteTodo}
/>
);
});
return (
<ul>
{props.todos.length ? todos: <li>nothing to do</li>}
</ul>
);
}
function TodoForm(props){
return (
<form>
<input type="text" value={props.item} onChange={props.updateItem}/>
<input type="submit" value="Add"/>
</form>
);
}
class App extends React.Component {
constructor(){
super();
this.state = {
todos: todos,
item: ''
};
this.checkTodo = this.checkTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
this.updateItem = this.updateItem.bind(this);
}
deleteTodo(todo){
if (!confirm('are you sure?')) {
return;
}
const todos = this.state.todos.slice();
const pos = this.state.todos.indexOf(todo);
todos.splice(pos, 1);
this.setState({
todos: todos
});
}
checkTodo(todo){
const todos = this.state.todos.map(todo => {
return {id: todo.id, title: todo.title, isDone: todo.isDone};
});
const pos = this.state.todos.map(todo=>{
return todo.id;
}).indexOf(todo.id);
todos[pos].isDone = !todos[pos].isDone;
this.setState({
todos: todos
});
}
updateItem(e){
this.setState({
item: e.target.value
})
}
render(){
return (
<div className="container">
<h1>My Todo</h1>
<TodoList
todos={this.state.todos}
checkTodo={this.checkTodo}
deleteTodo={this.deleteTodo}
/>
<TodoForm
item={this.state.item}
updateItem={this.updateItem}
/>
</div>
);
}
}
<script type="text/babel">
(() => {
const todos = [];
function TodoItem(props){
return (
<li key={props.todo.id}>
<label>
<input type="checkbox"
checked={props.todo.isDone}
onChange={() => props.checkTodo(props.todo)}
/>
<span className={props.todo.isDone ? 'done' : ''}>
{props.todo.title}
</span>
</label>
<span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
</li>
);
}
function TodoList(props){
const todos = props.todos.map(todo => {
return(
<TodoItem
key={todo.id}
todo={todo}
checkTodo={props.checkTodo}
deleteTodo={props.deleteTodo}
/>
);
});
return (
<ul>
{props.todos.length ? todos: <li>nothing to do</li>}
</ul>
);
}
function TodoForm(props){
return (
<form onSubmit={props.addTodo}>
<input type="text" value={props.item} onChange={props.updateItem}/>
<input type="submit" value="Add"/>
</form>
);
}
function getUniqueId(){
return new Date().getTime().toString(36) + '-' + Math.random().toString(36);
}
class App extends React.Component {
constructor(){
super();
this.state = {
todos: todos,
item: ''
};
this.checkTodo = this.checkTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
this.updateItem = this.updateItem.bind(this);
this.addTodo = this.addTodo.bind(this);
}
addTodo(e){
e.preventDefault();
if(this.state.item.trim()===''){
return;
}
const item = {
id: getUniqueId(),
title: this.state.item,
isDone: false
};
const todos = this.state.todos.slice();
todos.push(item);
this.setState({
todos: todos,
item: ''
});
}
deleteTodo(todo){
if (!confirm('are you sure?')) {
return;
}
const todos = this.state.todos.slice();
const pos = this.state.todos.indexOf(todo);
todos.splice(pos, 1);
this.setState({
todos: todos
});
}
checkTodo(todo){
const todos = this.state.todos.map(todo => {
return {id: todo.id, title: todo.title, isDone: todo.isDone};
});
const pos = this.state.todos.map(todo=>{
return todo.id;
}).indexOf(todo.id);
todos[pos].isDone = !todos[pos].isDone;
this.setState({
todos: todos
});
}
updateItem(e){
this.setState({
item: e.target.value
})
}
render(){
return (
<div className="container">
<h1>My Todo</h1>
<TodoList
todos={this.state.todos}
checkTodo={this.checkTodo}
deleteTodo={this.deleteTodo}
/>
<TodoForm
item={this.state.item}
updateItem={this.updateItem}
addTodo={this.addTodo}
/>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
})();
</script>
各パーツをそれぞれコンポートネントとして切り分ける。
