React的todolist的拆分项目
TodoList.jsx
| import Todo from "./Todo" |
| |
| export default function TodoList({ todos, toggleTodo, deleteTodo }) { |
| |
| return <> |
| <ul> |
| { |
| todos.map(todo => |
| <Todo key={todo.id} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} ></Todo> |
| ) |
| } |
| </ul> |
| </> |
| } |
| |
| |
| |
main.jsx
| import React from 'react' |
| import ReactDOM from 'react-dom/client' |
| import App from './App.jsx' |
| import "./index.css" |
| |
| ReactDOM.createRoot(document.getElementById('root')).render( |
| <React.StrictMode> |
| <App /> |
| </React.StrictMode>, |
| ) |
| |
NewItem.jsx
| import { useEffect, useState } from "react" |
| |
| export default function NewItem(props) { |
| |
| const [curTodo, setCurTodo] = useState('') |
| |
| function handleSumit(e) { |
| e.preventDefault() |
| if (curTodo.length === 0) return |
| props.onSumit(curTodo) |
| setCurTodo('') |
| } |
| |
| return <> |
| <form onSubmit={handleSumit}> |
| <input type="text" value={curTodo} onChange={e => setCurTodo(e.target.value)} /> |
| <button>Add</button> |
| </form> |
| </> |
| } |
App.jsx
| import { useEffect, useState } from "react" |
| import NewItem from './NewItem' |
| import TodoList from "./TodoList" |
| |
| |
| export default function App() { |
| |
| const [todos, setTodos] = useState(() => { |
| const localValue = localStorage.getItem("ITEMS") |
| if (localValue == null) return [] |
| return JSON.parse(localValue) |
| }) |
| |
| useEffect(() => { |
| localStorage.setItem("ITEMS", JSON.stringify(todos)) |
| }, [todos]) |
| |
| |
| function addTodo(title) { |
| setTodos(() => |
| [ |
| ...todos, |
| { |
| id: crypto.randomUUID(), |
| title: title, |
| status: false |
| } |
| ] |
| ) |
| } |
| |
| function toggleTodo(id, status) { |
| setTodos(() => |
| todos.map(todo => { |
| if (todo.id === id) { |
| return { ...todo, status } |
| } |
| return todo |
| }) |
| ) |
| } |
| |
| function deleteTodo(id) { |
| setTodos(() => |
| |
| todos.filter(todo => todo.id !== id) |
| ) |
| } |
| |
| return ( |
| |
| <> |
| <NewItem onSumit={addTodo}></NewItem> |
| <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo}></TodoList> |
| </> |
| |
| ) |
| } |
| |
| |
Todo.jsx
| export default function Todo({ todo, toggleTodo, deleteTodo }) { |
| return <> |
| <li> |
| <label> |
| <input |
| type="checkbox" |
| checked={todo.status} |
| onChange={(e) => toggleTodo(todo.id, e.target.checked)} |
| /> |
| <span className={todo.status ? "underline" : ''}>{todo.title}</span> |
| </label> |
| <button onClick={() => deleteTodo(todo.id)}>Delete</button> |
| </li> |
| </> |
| } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2022-09-21 api_post
2022-09-21 fastapi使用mongodb的小demo
2022-09-21 flask 博客系统 逻辑关系
2022-09-21 flask中使用pymongo