方向三：使用React 实现一个简单的待办事项列表| 豆包MarsCode AI刷题

在React中实现一个简单的待办事项列表，我们可以使用React的组件化特性来构建这个应用。这个待办事项列表将包含三个主要功能：添加新的待办事项、编辑现有的待办事项以及删除待办事项。在TodoList组件中，我们使用了React的useState钩子来创建两个状态变量：todos和input。todos是一个数组，用于存储所有的待办事项，每个待办事项都是一个对象，包含id、text和completed属性。input状态用于存储用户在输入框中输入的文本。下面是一个简单的实现示例：

首先，我们需要创建一个新的React应用。如果你还没有安装create-react-app，你可以通过运行npm install -g create-react-app来安装它。然后，使用create-react-app todo-app创建一个新的React应用，并进入该目录。

在src目录下，我们将创建一个新的组件TodoList.js，这个组件将负责管理待办事项的状态，并提供添加、编辑和删除待办事项的功能。

jsx
// src/TodoList.js
import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleAddTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
      setInput('');
    }
  };

  const handleToggleCompleted = (id) => {
    setTodos(
      todos.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
        placeholder="添加新的待办事项"
      />
      <button onClick={handleAddTodo}>添加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={() => handleToggleCompleted(todo.id)}>
              {todo.completed ? '未完成' : '完成'}
            </button>
            <button onClick={() => handleDeleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在这个组件中，我们使用了React的useState钩子来管理待办事项列表的状态和输入框的状态。handleAddTodo函数用于添加新的待办事项，handleToggleCompleted用于切换待办事项的完成状态，handleDeleteTodo用于删除待办事项，handleInputChange用于更新输入框的内容。

接下来，我们需要在src/App.js中引入并使用这个TodoList组件：

jsx
// src/App.js
import React from 'react';
import './App.css';
import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

最后，我们还需要添加一些基本的样式。在src/App.css中，我们可以添加以下样式：

css
/* src/App.css */
.App {
  text-align: center;
}

input {
  margin: 10px;
  padding: 5px;
}

button {
  margin: 5px;
  padding: 5px 10px;
}

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

li {
  margin: 5px 0;
}

现在，你可以运行npm start来启动开发服务器，并在浏览器中查看你的待办事项列表应用。你可以添加新的待办事项，标记它们为完成或未完成，以及删除它们。

这个示例展示了React组件的基本用法和状态管理。在实际应用中，你可能需要添加更多的功能，比如持久化存储待办事项、使用更复杂的状态管理解决方案（如Redux或Context API）等。