okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

简单的待办事项（To-do List）应用

2024/9/18

创建一个简单的待办事项（To-do List）应用是一个很好的练习，用来学习 React 的基础概念。这个示例将使用 React 的函数组件和 useState Hook 来管理状态，并实现添加和删除待办事项的功能。

1. 项目结构

我们假设你已经在一个 React 项目中，可以使用 create-react-app 或其他工具来初始化项目。

text
src/
  └── App.js
  └── index.js

2. 在 App.js 中编写代码

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

function App() {
  // 定义待办事项的状态
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  // 添加新任务
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input.trim()]);
      setInput('');  // 清空输入框
    }
  };

  // 删除任务
  const deleteTodo = (indexToDelete) => {
    const newTodos = todos.filter((_, index) => index !== indexToDelete);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>待办事项</h1>
    
      {/* 输入框和添加按钮 */}
      <div>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="请输入待办事项"
        />
        <button onClick={addTodo}>添加</button>
      </div>

      {/* 待办事项列表 */}
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} 
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. 样式（App.css）

css
.App {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

input {
  padding: 10px;
  margin-right: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  font-size: 16px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px;
  background-color: #f4f4f4;
}

li button {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

4. 运行应用

当你完成了上述代码，可以通过 npm start 或 yarn start 来启动项目。你将看到一个简单的待办事项应用，用户可以输入任务，点击 "添加" 按钮将其添加到列表中，并通过点击 "删除" 按钮来移除任务。

功能总结

  • 添加任务：通过输入框输入待办事项，并点击按钮将其添加到任务列表。
  • 删除任务：每个任务旁边有一个删除按钮，点击后该任务将从列表中移除。

这个示例展示了 React 中如何使用 useState 来管理组件状态，如何处理输入框的值，以及如何渲染和操作列表中的数据。