标签：todolist react import todo id todos
react todo list
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>,
)
todolist/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>
</>
)
}
todolist/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
todolist/vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
todolist/package.json
{
"name": "todolist",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}
标签：todolist,
react,
import,
todo,
id,
todos
From： https://www.cnblogs.com/zhuoss/p/17708016.html