react 实现todos案例

先建一个项目

yarn create vite Todos-template --template react

在src/components/TodoApp.jsx 建文件

import { useState } from 'react'import TodoList from './TodoList'
import TodoInput from './TodoInput'
function TodoApp() {const [ todos,setTodos] = useState([{cotent:"事项1",status: 0}])return (<div>{/* 实现状态提升 */}<TodoInput todos={todos} setTodos={setTodos}></TodoInput><TodoList todos={todos} setTodos={setTodos}></TodoList></div>)
}export default TodoApp

在src/components/TodoInput.jsx 建

import {  useState } from 'react'// 吧传过来的todos 和 setTodos 当作参数传递
function ToodoInput( {todos,setTodos}) {const [content,setContent] = useState('')const saveTodo = () =>{if(content.trim()){setTodos([...todos,{content,status:0}])setContent("")}} return (<div>{/* value={content} onChange={(e) => setContent(e.target.value)} 实现双向绑定 */}<input type="text" value={content} onChange={(e) => setContent(e.target.value)}></input><button onClick={saveTodo}>记录</button></div>)
}export default ToodoInput

在src/components/TodoList.jsx

import React from 'react'function TodoList({todos, setTodos}) {if (!todos.length) {return (<div>没有数据</div>)}const changeStatus = (index) => {// 生成一个新的todosconst _todos = [...todos]_todos[index].status = !_todos[index].statussetTodos(_todos)}const remove = (index, e) => {// console.log(e)// 阻止事件冒泡e.stopPropagation()// 根据index过滤出不包含对应的下标的数据const _todos = todos.filter((todo, i) => i !== index)// const _todos = [...todos]// _todos.splice(index, 1)setTodos(_todos)}return (<ul>{todos.map((todo, index) => <li onClick={() => changeStatus(index)} key={index}>{todo.content} {todo.status ? '完成' : "未完成"} <button onClick={(e) => remove(index, e)}>删除</button></li>)}</ul>)
}export default TodoList

在App.jsx中引入 TodoAPP

import TodoApp from './components/TodoApp'function App() {return (<div><TodoApp></TodoApp></div>)
}export default App

可实现对日志的添加 以及删除功能 以及点击相应的列表可以实现对状态的修改

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！