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

首先，创建一个React组件TodoList，用于显示待办事项列表，并处理相关的操作：

import React, { useState } from 'react';

const TodoList = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  const editTask = (index, updatedTask) => {
    const updatedTasks = [...tasks];
    updatedTasks[index] = updatedTask;
    setTasks(updatedTasks);
  };

  const deleteTask = (index) => {
    const updatedTasks = [...tasks];
    updatedTasks.splice(index, 1);
    setTasks(updatedTasks);
  };

  return (
    <div>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
      />
      <button onClick={addTask}>Add</button>

      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => deleteTask(index)}>Delete</button>
            <button onClick={() => editTask(index, prompt('New task:', task))}>
              Edit
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

在上述代码中，我们使用了React的useState钩子来管理状态。tasks数组用于存储待办事项列表，newTask用于保存用户输入的新任务。addTask函数处理添加任务的逻辑，如果输入不为空，则将新任务添加到任务列表中，并清空输入框。editTask函数用于更新特定索引位置的任务。deleteTask函数用于删除特定索引位置的任务。

在return中，我们渲染了一个输入框和两个按钮，用于添加新任务。待办事项呈现为一个无序列表，列表中包含每个任务以及针对每个任务的删除和编辑按钮。

最后，我们将TodoList组件集成到应用中的根组件，如下所示：

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

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

通过上述代码，我们在根元素中渲染TodoList组件，并将其呈现在页面上。 使用这个简单的React组件，用户可以通过输入框添加新的待办事项，点击相应的删除和编辑按钮来删除或编辑已有的待办事项。