react待办事项 | 青训营

当使用 React 来实现一个简单的待办事项列表时，你可以按照以下步骤进行操作：

1. 创建一个新的 React 应用（如果你还没有）：

npx create-react-app todo-list-app
cd todo-list-app

2. 在 src 文件夹中创建一个新的组件文件 TodoList.js，并开始编写待办事项列表的代码：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const editTodo = (index, newValue) => {
    const updatedTodos = [...todos];
    updatedTodos[index] = newValue;
    setTodos(updatedTodos);
  };

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="text"
              value={todo}
              onChange={(e) => editTodo(index, e.target.value)}
            />
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

3. 在 src 文件夹中的 App.js 文件中引入并使用 TodoList 组件：

import React from 'react';
import './App.css';
import TodoList from './TodoList';

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

export default App;

4. 运行应用并查看结果：

npm start

现在可以在浏览器中查看并使用你的待办事项列表应用了。用户可以添加、编辑和删除待办事项，而 React 的状态管理机制将会自动处理组件的重新渲染。

需要注意的是，上述代码是一个简化版的待办事项列表应用，没有进行持久化存储。如果你需要在刷新页面后仍然保留待办事项数据，你可以考虑使用浏览器的本地存储（如 localStorage 或 sessionStorage）或者集成一个后端服务器来存储数据。