怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  822 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

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(() =>
// 符合这个条件(todo.id !== id)的元素,都会被过滤下来,并将这些元素组成一个数组返回
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>
</>
}
posted on   超级无敌美少男战士  阅读(12)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源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
点击右上角即可分享
微信分享提示