使用React实现一个简单的待办事项列表｜青训营引言 React是一种流行的JavaScript库，用于构建用户界面。

引言

React是一种流行的JavaScript库，用于构建用户界面。它提供了组件化开发的方式，使得前端开发更加模块化和可维护。在本文中，我们将使用React来实现一个简单的待办事项列表应用，用户可以添加、编辑和删除待办事项。

1. 创建React应用

首先，我们需要创建一个新的React应用。可以使用Create React App工具快速搭建一个基本的React项目结构：

npx create-react-app todo-list-app

2. 定义组件结构

在React中，我们使用组件来构建界面。为了实现待办事项列表，我们需要定义三个组件：TodoList、TodoItem和AddTodoForm。

TodoList组件

TodoList组件是待办事项列表的容器组件，它负责渲染所有的待办事项，并处理添加、编辑和删除操作。该组件的状态包括待办事项的列表和当前正在编辑的事项。

import React, { useState } from 'react';
import TodoItem from './TodoItem';
import AddTodoForm from './AddTodoForm';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [editingTodoId, setEditingTodoId] = useState(null);

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

  // 编辑待办事项
  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo =>
      todo.id === id ? { ...todo, text: newText } : todo
    );
    setTodos(updatedTodos);
    setEditingTodoId(null);
  };

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

  return (
    <div>
      <h1>Todo List</h1>
      <AddTodoForm addTodo={addTodo} />
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          editing={editingTodoId === todo.id}
          startEditing={() => setEditingTodoId(todo.id)}
          finishEditing={newText => editTodo(todo.id, newText)}
          deleteTodo={() => deleteTodo(todo.id)}
        />
      ))}
    </div>
  );
}

export default TodoList;

TodoItem组件

TodoItem组件表示一个待办事项，它显示事项的文本内容，并提供编辑和删除功能。

import React, { useState } from 'react';

function TodoItem({ todo, editing, startEditing, finishEditing, deleteTodo }) {
  const [text, setText] = useState(todo.text);

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

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      finishEditing(text);
    }
  };

  return (
    <div>
      {editing ? (
        <input
          type="text"
          value={text}
          onChange={handleInputChange}
          onKeyPress={handleKeyPress}
        />
      ) : (
        <p>{todo.text}</p>
      )}
      <button onClick={startEditing}>Edit</button>
      <button onClick={deleteTodo}>Delete</button>
    </div>
  );
}

export default TodoItem;

AddTodoForm组件

AddTodoForm组件是一个表单，用于添加新的待办事项。

import React, { useState } from 'react';

function AddTodoForm({ addTodo }) {
  const [text, setText] = useState('');

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() !== '') {
      addTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleInputChange} placeholder="Add a new todo" />
      <button type="submit">Add</button>
    </form>
  );
}

export default AddTodoForm;

3. 渲染应用

最后，我们需要在根组件中渲染TodoList组件，以展示整个待办事项列表应用。

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

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

export default App;

总结

通过使用React，我们成功地实现了一个简单的待办事项列表应用。我们定义了三个组件：TodoList、TodoItem和AddTodoForm，并分别处理添加、编辑和删除待办事项的逻辑。这个应用演示了React组件化开发的优点，使得代码更加可读、可维护和可扩展。

在开发过程中，我们也思考了如何设计组件的状态和交互，以及如何将不同组件进行组合和通信。这种思考和分析能力对于开发者来说是非常重要的，它们帮助我们更好地理解和应用React的相关概念和技术。

最后，我们还学习了如何使用React工具链来创建和运行React应用，并介绍了一些常用的React组件和钩子函数。通过进一步学习和实践，我们可以构建更复杂和功能丰富的React应用，并探索更多的React生态系统中的工具和库。

使用React实现一个简单的待办事项列表｜ 青训营

引言