使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项

React 是一个用于构建用户界面的 JavaScript 库，它可以用于构建交互式、可重用的用户界面组件。在本文中，我们将使用 React 来实现一个简单的待办事项列表，用户可以添加、编辑和删除待办事项。

首先，我们需要创建一个 React 组件来表示整个待办事项列表。我们可以将其命名为 TodoList。在这个组件中，我们将使用 React 的状态来保存待办事项的数据，并实现添加、编辑和删除待办事项的功能。

import React, { useState } from 'react';

function TodoList() {
  // 用 useState 定义一个状态用于保存待办事项
  const [todos, setTodos] = useState([]);
  // 用 useState 定义一个状态用于保存输入框的值
  const [inputValue, setInputValue] = useState('');

  // 处理输入框变化的事件
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  // 处理添加待办事项的事件
  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  // 处理编辑待办事项的事件
  const handleEditTodo = (index) => {
    const newTodo = prompt('请输入新的待办事项', todos[index]);
    if (newTodo !== null) {
      const newTodos = [...todos];
      newTodos[index] = newTodo;
      setTodos(newTodos);
    }
  };

  // 处理删除待办事项的事件
  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleEditTodo(index)}>编辑</button>
            <button onClick={() => handleDeleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
      <div>
        <input value={inputValue} onChange={handleInputChange} />
        <button onClick={handleAddTodo}>添加</button>
      </div>
    </div>
  );
}

export default TodoList;

在上述代码中，我们使用了 React 的 useState 钩子来定义状态变量。todos 变量用于保存待办事项数组，inputValue 变量用于保存输入框的值。

在 handleInputChange 函数中，我们通过事件参数获取输入框的值，并将其保存到 inputValue 状态变量中。

在 handleAddTodo 函数中，我们首先检查输入框的值是否为空，如果不为空，就将其添加到 todos 状态变量中，并清空输入框的值。

在 handleEditTodo 函数中，我们使用 JavaScript 的 prompt 函数来显示一个对话框，让用户输入新的待办事项。如果用户点击取消按钮，则不做任何操作；否则，我们使用新的待办事项替换原来在 todos 数组中的对应位置的元素。

在 handleDeleteTodo 函数中，我们使用 splice 函数从 todos 数组中删除指定位置的元素。

最后，我们在组件的渲染函数中，通过 map 方法遍历 todos 数组，为每个待办事项创建一个列表项，并提供编辑和删除按钮。

在完成上述代码后，我们可以在另一个 React 组件中引入 TodoList 组件，并将其放置在页面中的合适位置，如下所示：

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

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

export default App;

在这个示例中，我们将 TodoList 组件放置在 App 组件中，并在页面中显示一个标题。

最后，我们需要在根组件中将 App 组件渲染到页面中，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

以上就是使用 React 实现一个简单的待办事项列表的基本步骤。当用户在输入框中输入待办事项并点击添加按钮时，列表中将显示相应的待办事项。用户还可以点击编辑按钮来修改待办事项，并点击删除按钮来删除待办事项。

使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项 | 青训营