使用react开发一个简单的todo_list

最新推荐文章于 2024-06-18 09:45:32 发布

元来是你

最新推荐文章于 2024-06-18 09:45:32 发布

阅读量383

点赞数 8

文章标签： react.js list 前端

本文链接：https://blog.csdn.net/qq_33250133/article/details/136198317

版权

本文详细介绍了如何使用React和hooks(useState)实现一个基础的待办事项列表应用，包括TodoForm用于添加任务，以及Todo组件展示、完成和删除功能。

摘要由CSDN通过智能技术生成

import React, { useState } from 'react';
import './App.css';

function TodoForm({addTodo}) {
  const [value, setValue] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    if(!value) return;
    addTodo(value);
    setValue('');
  }
  return <form onSubmit={handleSubmit}>
    <input type='text' placeholder='add todo...' value={value} onChange={e=>setValue(e.target.value)}></input>
  </form>
}

function Todo({todo, index, finishTodo, removeTodo}){
  const handleComplete = e => {
    finishTodo(index);
  }

  const handleDelete = e => {
    removeTodo(index);
  }

  return (
    <div style={{textDecoration: todo.isComplete?'line-through':''}}>
      <div>
          {todo.text}
          <button onClick={handleComplete}>完成</button>
          <button onClick={handleDelete}>删除</button>
      </div>
    </div>
  )
}

function App() {
  const [todos,setTodo] = useState([
    {text: 'sleep', isComplete: false},
    {text: 'eat', isComplete: true}
  ])

  const addTodo = text => {
    const todo = {text: text}
    const newTodos = [...todos, todo];
    setTodo(newTodos);
  }

  const finishTodo = index => {
    const newTodos = [...todos];
    newTodos[index].isComplete = true;
    setTodo(newTodos);
  }

  const removeTodo = index => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodo(newTodos);
  }
  
  return (
    <div className="App">
      <h1>todos</h1>
      <div>
        {
          todos.map((todo, index) => {
            return <Todo todo={todo} index={index} key={index} finishTodo={finishTodo} removeTodo={removeTodo}></Todo>
          })
        }
      </div>
      <TodoForm addTodo={addTodo}></TodoForm>
    </div>
  );
}

export default App;