使用React创建待办事项列表 | 青训营

使用React可以更加高效地创建和管理用户界面，下面我们通过React来实现一个简单的待办事项列表应用，用户可以添加、编辑和删除待办事项。

1. 创建React组件： 首先，我们需要创建一个React组件来表示整个待办事项列表应用。在组件中，我们将使用状态（state）来保存待办事项的数据，并编写相应的方法来处理数据的增删改操作。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  // 添加待办事项
  const addTodo = () => {
    if (text.trim() !== '') {
      const newTodo = { id: Date.now(), text, editing: false };
      setTodos([...todos, newTodo]);
      setText('');
    }
  };

  // 删除待办事项
  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  // 编辑待办事项
  const editTodo = (id) => {
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          todo.editing = true;
        }
        return todo;
      })
    );
  };

  // 更新待办事项
  const updateTodo = (id, newText) => {
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          todo.text = newText;
          todo.editing = false;
        }
        return todo;
      })
    );
  };

  // 渲染待办事项列表
  const renderTodoList = () => {
    return todos.map((todo) => {
      if (todo.editing) {
        return (
          <input
            key={todo.id}
            type="text"
            value={todo.text}
            onChange={(e) => updateTodo(todo.id, e.target.value)}
          />
        );
      } else {
        return (
          <div key={todo.id}>
            <span>{todo.text}</span>
            <button onClick={() => editTodo(todo.id)}>编辑</button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </div>
        );
      }
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="输入待办事项"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={addTodo}>添加</button>
      <div>{renderTodoList()}</div>
    </div>
  );
}

export default TodoList;

2. 在根组件中使用待办事项列表组件： 在根组件中，我们将使用TodoList组件来渲染整个待办事项列表应用。

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

function App() {
  return (
    <div>
      <h1>待办事项列表</h1>
      <TodoList />
    </div>
  );
}

export default App;

通过上述代码，我们创建了一个使用React实现的待办事项列表应用。用户可以在输入框中添加新的待办事项，点击编辑按钮可以对事项进行编辑，点击删除按钮可以删除事项。

通过使用React，我们能够更加高效地管理应用状态，并将状态的变化反映到用户界面上。组件化的结构使得代码更加清晰、易于维护和扩展。React还提供了丰富的生命周期方法和Hooks来处理组件的生命周期和状态管理。

这个实例项目展示了如何使用React来实现一个简单的待办事项列表，并介绍了React组件、状态管理和事件处理的基本概念。通过这样的实践，我们能够更好地了解和掌握React的使用，以构建更复杂、功能更强大的应用程序。