首页 > 其他分享 >react的todolist拆分项目

react的todolist拆分项目

时间:2023-09-21 21:23:19浏览次数:40  
标签:function return todolist react 拆分 import todo id todos

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>
    </>
}

标签:function,return,todolist,react,拆分,import,todo,id,todos
From: https://www.cnblogs.com/zhuoss/p/17720978.html

相关文章

  • React学习之类组件的this指向问题
    免责声明我们幼儿园有适合自己看的注释拉满版文档,目标是我奶来都能看懂(不是)。1.前置知识类this指向call、bind、apply待展开...欸嘿,我怎么什么都想不己来了1.1es6类的简单回顾   classPerson{    //构造器    constructor(name,age){ ......
  • react基础操作
    组件之间进行参数传递首先我们创建一个组件,在我们的主程序中把数据传递过去import{useState}from'react'importSOMEfrom'./g6/ant-d-g6'import'./App.css'functionApp(){const[data,setData]=useState<String>('传递参数')return(......
  • vue3的ref、reactive的使用
    一、介绍ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref推荐定义基本数据类型,reactive推荐定义引用数据类型(对象或数组) 二、ref与reactive对比<template><p>{{person.name}}</p><p>{{person.long}}</p><p>{{age}}</p><p>{{info.addr......
  • React 虚拟滚动 长列表
    定高版本1"useclient";2importReact,{useCallback,useMemo,useState}from"react";34interfaceIProps{5list:any[];6fixedHeight:number;7}89//Fixedheight10constVirtualView=(props:IProps)=>{1......
  • 将每一个OTU拆分成不同的分类级别
    importpandasaspd#读取OTU表otu_df=pd.read_csv('C:\\Users\\Administrator\\Desktop\\1.txt',header=None)#创建一个空的DataFrame来存储结果df=pd.DataFrame(columns=["OTUID","Kingdom","Phylum","Class",&......
  • 分库分表之拆分键设计
    众所周知,在现实世界中,每一个资源都有其提供能力的最大上限,当单一资源达到最大上限后就得让多个资源同时提供其能力来满足使用方的需求。同理,在计算机世界中,单一数据库资源不能满足使用需求时,我们也会考虑使用多个数据库同时提供服务来满足需求。当使用了多个数据库来提供服务时,最......
  • React hooks详解
    importReact,{useEffect,useState}from'react';hook是react16.8的新增特性,他可以让你不在编写class的情况下shiystate以及react的特性Hooks的出现,首先解决了以下问题:告别了令人疑惑的生命周期告别类组件中烦人的this告别繁重的类组件,回归到了熟悉的函数组件reac......
  • React_doc
    React=》构建用户界面的JS库,用户界面是由按钮、文本和图像等小的单元内容构建。React可以组合成可重用、可嵌套的组件。组件案例functionProfile(){return(<imgsrc='https://i.xxx.com/test.jpg'alt=''/>)}exportdefaultfunctionGallery(){retur......
  • 框架分析(2)-React
    (框架分析(2)-React)专栏介绍link主要对目前市面上常见的框架进行分析和总结,希望有兴趣的小伙伴们可以看一下,会持续更新的。希望各位可以监督我,我们一起学习进步。ReactReact是由Facebook研发的一个用于构建用户界面的JavaScript库。它采用了组件化的开发方式,通过将界面拆分成......
  • Vue3深度解析:reactive和ref的区别你真的了解吗?
    Vue3中引入了CompositionAPI,其中包含了reactive和ref两个核心函数。这两个函数都是用于创建响应式数据的,但它们之间有一些区别。首先,让我们来看一下reactive函数。reactive函数接受一个普通对象作为参数,并返回一个新的响应式对象。这个响应式对象会跟踪所有属性的变化,并在属性发......