import React , {useState, useCallback, useRef, useEffect, memo} from 'react';
import './ToDoList.css';
let idSeq = 0;
const Control = memo(function Control (props) {
const { addTodo } = props;
const inputRef = useRef();
const onSubmit = (e) => {
e.preventDefault();
const newText = inputRef.current.value.trim();
if(newText.length > 0) {
addTodo({
id: ++ idSeq,
text: newText,
complete: false
})
}
inputRef.current.value = "";
}
return <div className="control">
<h1>todos</h1>
<form onSubmit={onSubmit}>
<input type="text"
className="new-todo"
placeholder="what needs td be done?"
ref={inputRef}
/>
</form>
</div>
})
const Todos = memo(function Todos (props) {
const { todos , removeTodo, toggleTodo} = props;
return (
<ul className="todos">
{
todos.map(todo => {
return (
<TodoItem
key={todo.id}
todo={todo}
toggleTodo={toggleTodo}
removeTodo={removeTodo}
/>
)
})
}
</ul>
)
})
const TodoItem = memo(function TodoItem (props) {
const { todo: {
id,
text,
complete
} , removeTodo, toggleTodo} = props
const onChange =() => {
toggleTodo(id);
}
const onRemove = () => {
removeTodo(id);
}
return (
<li className="todo-item">
<input type="checkbox" onChange={onChange} checked={complete}/>
<label className={complete ? 'complete': ''}>{text}</label>
<button onClick={onRemove}>刪除</button>
</li>
)
})
const ToDoList = memo(function ToDoList () {
const [todos, setTodos ] = useState([]);
const addTodo = useCallback((todo) => {
setTodos(todos => [...todos,todo]);
},[])
const removeTodo = useCallback(
(id) => {
setTodos(todos => todos.filter(todo => {
return todo.id !== id;
}))
},
[]
)
const toggleTodo = useCallback((id) => {
setTodos(todos => todos.map(todo => {
return todo.id === id ?
{
...todo,
complete: !todo.complete
}:
{...todo}
}))
},[])
useEffect(() => {
const todos = JSON.parse(localStorage.getItem('todos')) || [];
setTodos(todos);
},[])
useEffect(()=> {
localStorage.setItem('todos',JSON.stringify(todos))
},[todos])
return (
<div className="todo-list">
<Control addTodo={addTodo}></Control>
<Todos toggleTodo={toggleTodo} removeTodo={removeTodo} todos={todos}></Todos>
</div>
)
})
export default ToDoList;
react-hooks實現todolist
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Vue package-lock.json的作用
package-lock.json的作用 "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "h
前端 Vue-cli中 vue.config.js 的配置詳解
Vue-cli 3 / Vue-cli 4 目錄結構 ├── README.md # 說明 |-- dist # 打包後文件夾 ├── babel.config.js