写一个react代办列表

这是一个简单的React代办列表，包括添加、删除和完成任务的功能：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleNewTodoChange = (event) => {
    setNewTodo(event.target.value);
  };

  const handleAddTodo = () => {
    if (newTodo !== '') {
      setTodos([...todos, { text: newTodo, completed: false }]);
      setNewTodo('');
    }
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const handleCompleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={newTodo} onChange={handleNewTodoChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
            <button onClick={() => handleCompleteTodo(index)}>
              {todo.completed ? 'Undo' : 'Complete'}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在这个示例中，我们使用了React的Hooks来管理状态。`useState`函数允许我们在函数组件中使用状态，并通过`setTodos`和`setNewTodo`来更新它们。

在页面上，我们有一个文本框和一个“添加”按钮，可以将新的任务添加到列表中。我们还有一个`ul`元素，用于呈现任务列表。每个任务都有一个删除按钮和一个完成按钮，可以将任务标记为已完成或未完成。完成的任务将带有删除线。

我们使用`map`函数来遍历任务列表，并为每个任务呈现一个`li`元素。我们还使用`key`属性来确保React可以更快地重建列表。

总的来说，这是一个简单的React代办列表，可以轻松扩展和自定义，以适应您的需要。