React简单实践 | 青训营

在前端开发中，使用React可以方便地构建交互式的用户界面。本文将介绍如何使用React实现一个简单的待办事项列表，其中用户可以添加、编辑和删除待办事项。

首先，我们需要创建一个React组件来管理待办事项的状态并处理用户的操作。我们可以使用函数式组件和React Hooks来实现这个功能。下面是一个示例的实现代码：

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>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>添加</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)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在上述代码中，我们使用了React的函数式组件和Hooks。首先，通过useState Hook创建了两个状态：todos用于存储待办事项的列表，newTodo用于存储用户输入的新待办事项。

接下来，在组件的渲染部分，我们使用一个文本输入框和一个按钮来让用户添加新的待办事项。文本输入框的值从newTodo状态中获取，并通过setNewTodo函数更新该值。当用户点击添加按钮时，我们通过addTodo函数将newTodo的值添加到待办事项列表中，并清空输入框的值。

待办事项列表部分使用无序列表 <ul> 和列表项 <li> 来展示每个待办事项。对于每个待办事项，我们显示一个文本输入框和一个删除按钮。文本输入框的值从对应的待办事项获取，同时通过editTodo函数来编辑该待办事项。删除按钮通过deleteTodo函数来删除对应的待办事项。

最后，我们导出TodoList组件，以便能够在其他地方使用它。

现在，可以在React应用中引入并使用该组件来实现一个简单的待办事项列表。通过添加、编辑和删除待办事项，可以更好地理解React的状态管理和事件处理机制。

总结起来，使用React实现一个简单的待办事项列表，通过定义状态、编写处理函数，并将它们与用户界面进行交互，我们可以构建出具有交互性的应用程序。