使用React 实现一个简单的待办事项列表 | 豆包MarsCode AI刷题项目结构当你使用 Create Reac

项目结构

当你使用 Create React App 创建项目时，基本的目录结构如下：

Copy Code
todo-list/
├── node_modules/
├── public/
│   └── index.html
└── src/
    ├── App.css
    ├── App.js
    ├── index.js

index.js：应用程序的入口点，通常用于渲染根组件。
App.js：主要的应用组件，负责渲染待办事项列表和管理应用状态。
App.css：用于样式定义的文件。

2. 状态管理

使用 useState Hook 来管理应用状态，包括待办事项列表、输入框的值，以及当前编辑的事项索引。

jsxCopy Code
const [todos, setTodos] = useState([]);      // 待办事项数组
const [inputValue, setInputValue] = useState('');  // 输入框的值
const [editIndex, setEditIndex] = useState(null);  // 当前编辑的待办事项索引

todos：一个数组，存储所有的待办事项。
inputValue：用于绑定输入框的当前值。
editIndex：用于跟踪当前正在编辑的事项索引。

3. 事件处理

应用的核心功能依赖于几个事件处理函数：

添加待办事项

jsxCopy Code
const handleAddTodo = () => {
  if (inputValue.trim()) {
    if (editIndex !== null) {
      // 编辑模式
      const updatedTodos = todos.map((todo, index) =>
        index === editIndex ? inputValue : todo
      );
      setTodos(updatedTodos);
      setEditIndex(null);
    } else {
      // 添加新事项
      setTodos([...todos, inputValue]);
    }
    setInputValue(''); // 清空输入框
  }
};

逻辑：
- 检查输入框是否为空，避免添加空事项。
- 如果处于编辑状态（editIndex不为null），则更新对应的待办事项。
- 否则，将新事项添加到待办事项列表中。

编辑待办事项

jsxCopy Code
const handleEditTodo = (index) => {
  setInputValue(todos[index]); // 将选中的待办事项的内容放入输入框
  setEditIndex(index); // 设置当前编辑的索引
};

逻辑：通过点击“编辑”按钮，用户可以将待办事项内容加载到输入框中，以便进行修改。

删除待办事项

jsxCopy Code
const handleDeleteTodo = (index) => {
  const updatedTodos = todos.filter((_, i) => i !== index); // 过滤掉被删除的事项
  setTodos(updatedTodos);
};

逻辑：当用户点击“删除”按钮时，过滤掉对应的待办事项，更新列表。

4. 渲染 UI

jsxCopy Code
return (
  <div className="App">
    <h1>待办事项列表</h1>
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)} // 绑定输入框值
      placeholder="输入待办事项"
    />
    <button onClick={handleAddTodo}>
      {editIndex !== null ? '保存' : '添加'} // 根据编辑状态切换按钮文本
    </button>
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          {todo}
          <button onClick={() => handleEditTodo(index)}>编辑</button>
          <button onClick={() => handleDeleteTodo(index)}>删除</button>
        </li>
      ))}
    </ul>
  </div>
);

输入框：用户输入待办事项的地方，绑定了 inputValue 以实现双向数据绑定。
按钮：用于添加或保存待办事项，文本内容会根据当前是否在编辑状态变化。
待办事项列表：使用 map 方法遍历 todos 数组，渲染每个待办事项以及相应的编辑和删除按钮。

5. 样式设计

在 App.css 中，我们可以为应用增加一些简单的样式，使其更加美观和用户友好。

cssCopy Code
.App {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

input {
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px;
}

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

li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

整体布局：设置最大宽度和居中显示，使得应用在各种设备上都能良好展示。
输入框和按钮样式：增加内边距，提高可点击性，改善用户体验。
待办事项列表：无列表样式，使用边框分隔每个事项，提升视觉清晰度。