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

在React中实现一个简单的待办事项列表可以按如下步骤进行：

1. 创建一个新的React组件，命名为TodoList，用于管理待办事项列表的状态。

2. 在TodoList组件的构造函数中初始化状态，包括待办事项列表的数组和输入框的初始值。

3. 在render方法中，使用map方法遍历待办事项列表数组，渲染每个待办事项的内容和操作按钮。同时渲染一个输入框和添加按钮用于新建待办事项。

4. 实现添加待办事项的功能：创建一个方法addTodo，该方法将用户输入的文本作为参数，将其添加到待办事项列表中，并清空输入框。

5. 实现编辑待办事项的功能：创建一个方法editTodo，该方法接受两个参数，分别是待编辑的事项的索引和新的文本，将指定索引处的待办事项内容更新为新的文本。

6. 实现删除待办事项的功能：创建一个方法deleteTodo，该方法接受一个参数，表示待删除事项的索引，将指定索引处的待办事项从列表中删除。

以下是一个简单的示例代码：

import React, { Component } from 'react';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      newTodo: ''
    };
  }

  handleInputChange = (e) => {
    this.setState({ newTodo: e.target.value });
  }

  addTodo = () => {
    const { newTodo, todos } = this.state;
    if (newTodo.trim() !== '') {
      const updatedTodos = [...todos, newTodo];
      this.setState({ todos: updatedTodos, newTodo: '' });
    }
  }

  editTodo = (index, newText) => {
    const { todos } = this.state;
    const updatedTodos = [...todos];
    updatedTodos[index] = newText;
    this.setState({ todos: updatedTodos });
  }

  deleteTodo = (index) => {
    const { todos } = this.state;
    const updatedTodos = todos.filter((_, i) => i !== index);
    this.setState({ todos: updatedTodos });
  }

  render() {
    const { todos, newTodo } = this.state;

    return (
      <div>
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>
              {todo}
              <button onClick={() => this.editTodo(index, prompt('Edit todo:', todo))}>
                Edit
              </button>
              <button onClick={() => this.deleteTodo(index)}>
                Delete
              </button>
            </li>
          ))}
        </ul>
        <input type="text" value={newTodo} onChange={this.handleInputChange} />
        <button onClick={this.addTodo}>Add</button>
      </div>
    );
  }
}

export default TodoList;

在上述示例中，我们使用了React的状态（state）和事件处理机制来管理待办事项列表。用户可以通过输入框添加新的待办事项，点击编辑按钮修改事项内容，点击删除按钮删除事项。每次状态更新都会触发组件的重新渲染，从而实现实时的UI更新。