React The Milk 🥛
<div id="app"></div>
const ToDoList = React.createClass({
getInitialState: function() {
const todo = JSON.parse(localStorage.getItem('todo')) || [];
return {
todoItems: todo,
newItem: ''
};
},
handleEdit: function(e) {
this.setState({newItem: e.target.value});
},
handleKey: function(e) {
if (e.key === 'Enter') {
this.handleAdd();
}
},
handleAdd: function() {
if (this.state.newItem) {
const item = {name: this.state.newItem};
const newItems = this.state.todoItems.concat(item);
this.setState({todoItems: newItems});
this.setState({newItem: ''});
this.inputFocus();
localStorage.setItem('todo', JSON.stringify(newItems));
}
},
handleDelete: function(i) {
const tempItems = this.state.todoItems;
tempItems.splice(i, 1);
this.setState({todoItems: tempItems});
this.inputFocus();
localStorage.setItem('todo', JSON.stringify(this.state.todoItems));
},
inputFocus: function() {
document.querySelector('input[type="text"]').focus();
},
render: function() {
const currentItems = this.state.todoItems.map((item, i) =>
<li key={i}>
{item.name}
<button onClick={() => this.handleDelete(i)}>delete</button>
</li>
);
return (
<div>
<input
type="text"
value={this.state.newItem}
onChange={this.handleEdit}
onKeyPress={this.handleKey}
/>
<button onClick={this.handleAdd}>add</button>
<ul>
{currentItems}
</ul>
</div>
);
}
});
ReactDOM.render(
<ToDoList />,
document.getElementById('app')
);
use npm
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class ToDoList extends Component {
constructor(props) {
super(props);
const todo = JSON.parse(localStorage.getItem('todo')) || [];
this.state = {
todoItems: todo,
newItem: ''
};
this.handleEdit = this.handleEdit.bind(this);
this.handleKey = this.handleKey.bind(this);
this.handleAdd = this.handleAdd.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.inputFocus = this.inputFocus.bind(this);
}
handleEdit(e) {
this.setState({newItem: e.target.value});
}
handleKey(e) {
if (e.key === 'Enter') {
this.handleAdd();
}
}
handleAdd() {
if (this.state.newItem) {
const item = {name: this.state.newItem};
const newItems = this.state.todoItems.concat(item);
this.setState({todoItems: newItems});
this.setState({newItem: ''});
this.inputFocus();
localStorage.setItem('todo', JSON.stringify(newItems));
}
}
handleDelete(i) {
const tempItems = this.state.todoItems;
tempItems.splice(i, 1);
this.setState({todoItems: tempItems});
this.inputFocus();
localStorage.setItem('todo', JSON.stringify(this.state.todoItems));
}
inputFocus() {
document.querySelector('input[type="text"]').focus();
}
render() {
const currentItems = this.state.todoItems.map((item, i) =>
<li key={i}>
{item.name}
<button onClick={() => this.handleDelete(i)}>delete</button>
</li>
);
return (
<div>
<input
type="text"
value={this.state.newItem}
onChange={this.handleEdit}
onKeyPress={this.handleKey}
/>
<button onClick={this.handleAdd}>add</button>
<ul>
{currentItems}
</ul>
</div>
);
}
}
ReactDOM.render(
<ToDoList />,
document.getElementById('app')
);
React使用のTodoタスクツール簡単作成方法(v16対応サンプル付)