使用 React 的待办事项列表应用

通过本教程，释放 React 的全部潜力，提升你的编程技能！我们将构建一个实用且功能强大的待办事项列表应用，展现这个热门 JavaScript 库的强大功能。你将学习如何创建自己的动态交互式 UI 元素，让你的应用更加用户友好、高效。

目标：

定义 TodoList 组件：我们将首先创建一个定义 TodoList 组件的功能组件。
使用 useState Hook 管理状态：接下来，我们将利用 useState Hook 的强大功能来管理 TodoList 组件中的状态。
使用 JSX 设计用户界面：为了创建一个引人入胜且时尚的用户界面，我们将使用 JSX 来定义 TodoList 组件的 UI。
处理事件：我们将实现事件处理来添加和删除待办事项，包括表单提交和按钮点击。
条件渲染：最后，我们将使用条件渲染，仅在待办事项存在时显示其删除按钮，从而使我们的应用程序更加用户友好和高效。

准备好将你的 React 技能提升到新的高度，并构建一个功能齐全、界面美观的待办事项列表应用了吗？让我们开始吧！

设置

打开终端或命令提示符，启动我们的 React 项目。导航到要创建新项目的目录。进入所需目录后，输入以下命令：



npx create-react-app todo-app

创建项目后，使用以下命令导航到项目目录：



cd todo-app

接下来，安装 React 和 ReactDOM：



npm install react react-dom

它们对于创建 React 应用都至关重要。React 允许你创建可重用的 UI 组件，而 ReactDOM 负责将这些组件渲染到浏览器中。

现在您可以通过运行以下命令来启动开发服务器：



npm start

创建待办事项列表组件




function TodoList () {

  return (
    <div>
      <form>
        <input type="text" />
        <button>Add Todo</button>
      </form>
      <ul>
          <li>
         </li>
      </ul>
    </div>
  );
}

export default TodoList;

结果

添加其余 React 功能

在组件最顶部添加 import 语句，引入 React 库和来自 react 包的 useState 钩子。



import React, { useState } from 'react';

添加 useState 钩子来创建两种状态：todos 和 inputValue。todos 是一个保存待办事项列表的数组，inputValue 是一个保存输入字段值的字符串。



const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');

添加待办事项列表



import React from 'react'
import { useState } from 'react'

function TodoList () {
  const [todos, setTodos] = useState([])
  const [inputValue, setInputValue] = useState('')

function handleChange(e){
  setInputValue(e.target.value)
}

function handleSubmit(e){
  e.preventDefault()
  setTodos([...todos, inputValue])
  setInputValue('')
}
  return (
    <div>
      <h1>Todo List</h1>
      <form>
        <input type='text' value={inputValue} onChange={handleChange}/>
        <button onClick={handleSubmit}>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}
           <button>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default TodoList

结果

让我们分解一下上面的代码

这是将要渲染到屏幕上的 JSX 代码。它包含一个表单，其中包含一个输入框和一个用于添加待办事项的按钮；一个无序列表，其中包含每个待办事项对应的删除按钮；以及一个标题。



 <div>
      <h1>Todo List</h1>
      <form  onSubmit={handleSubmit}>
        <input type='text' value={inputValue} onChange={handleChange}/>
        <button>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}
             <button>Delete</button> 
          </li>
        ))}
      </ul>
    </div>

在表单内部，输入字段的值被设置为 inputValue 状态，并将 onChange 事件设置为 handleChange 函数，该函数在每次输入字段发生变化时更新 inputValue 状态。



      <form  onSubmit={handleSubmit}>
        <input type='text' value={inputValue} onChange={handleChange}/>
        <button>Add Todo</button>
      </form>

在 ul 中，使用 map 方法将每个待办事项渲染为一个 li 元素，其键设置为待办事项的索引。每个 li 元素还包含一个删除按钮。



      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}
             <button>Delete</button> 
          </li>
        ))}
      </ul>

这是一个将 inputValue 状态设置为输入字段值的函数。每次输入字段发生变化时都会调用该函数。



const handleChange = (e) => {
  setInputValue(e.target.value);
};

这是一个函数，用于在表单提交时向 todos 状态添加新的待办事项，并清除 inputValue 状态。它在表单提交时被调用。



const handleSubmit = (e) => {
  e.preventDefault();
  setTodos([...todos, inputValue]);
  setInputValue('');
};

删除待办事项列表

这是一个从 todos 状态中删除待办事项的函数。它使用扩展运算符创建 todos 数组的副本，使用 splice 方法删除指定索引处的待办事项，并将 todos 状态设置为新数组。



const handleDelete = (index) => {
  const newTodos = [...todos];
  newTodos.splice(index, 1);
  setTodos(newTodos);
};




//




   <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}
          <button onClick={() =>handleDelete(index)}>Delete</button>
          </li>
        ))}

结果

这是我们最终整理的代码



import React from 'react'
import { useState } from 'react'

function TodoList () {
  const [todos, setTodos] = useState([])
  const [inputValue, setInputValue] = useState('')

function handleChange(e){
  setInputValue(e.target.value)
}

function handleSubmit(e){
  e.preventDefault()
  setTodos([...todos, inputValue])
  setInputValue('')
}

function handleDelete(index){
  const newTodos = [...todos]
  newTodos.splice(index, 1)
  setTodos(newTodos)
}
  return (
    <div>
      <h1>Todo List</h1>
      <form>
        <input type='text' value={inputValue} onChange={handleChange}/>
        <button onClick={handleSubmit}>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}
          <button onClick={() =>handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default TodoList;

鏂囩珷鏉ユ簮锛�https://dev.to/misszamzam/a-simple-todo-list-app-with-react-1bj3