怪物奇妙物语

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

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

React的todolist

src/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>,
)

src/App.jsx

import { useEffect, useState } from "react"
export default function App() {
const [curTodo, setCurTodo] = useState('')
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(e) {
e.preventDefault()
if (curTodo.length === 0) return
setTodos(() =>
[
...todos,
{
id: crypto.randomUUID(),
title: curTodo,
status: false
}
]
)
setCurTodo('')
}
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 (
<>
<form onSubmit={addTodo}>
<input type="text" value={curTodo} onChange={e => setCurTodo(e.target.value)} />
<button>Add</button>
</form>
<ul>
{
todos.map(todo =>
<li key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.status}
onChange={(e) => toggleTodo(todo.id, e.target.checked)}
/>
{todo.title}
</label>
<button onClick={() => deleteTodo(todo.id)}>Delete</button>
</li>
)
}
</ul>
</>
)
}
posted on   超级无敌美少男战士  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2022-09-21 api_post
2022-09-21 fastapi使用mongodb的小demo
2022-09-21 flask 博客系统 逻辑关系
2022-09-21 flask中使用pymongo
点击右上角即可分享
微信分享提示