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

引言

最近在学习React，Marscode的在线IDE真的很好用，非常适合学习新技术的时候写一些小demo，即开即用，省心省力。下面记录一下我在Marscode上使用React实现一个简单待办事项列表的实践

需求

用户可以添加、编辑和删除待办事项

开发流程

环境搭建

使用Marscode搭建React开发环境非常简单。

打开Marscode首页，新建一个项目

在右侧的模板中选择Web下面的React模板，再给项目娶个名字，点击创建即可

创建后就来到了经典的IDE布局的页面，不同的是右边多了一个AI助手，这也是这个在线IDE的强大之处，可以随时使用AI来帮助我们开发。

开发

使用AI协助开发，对于简单的需求，我们可以直接试着让AI帮我们实现。比如现在我们要做一个代办事项列表，功能是用户可以添加、编辑和删除待办事项，我们可以直接丢给AI，看看AI的回答能否帮到我们。

发现AI直接帮我们把todolist这个组件的代码给写出来了

import React, { useState } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim()!== '') {
      setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
      setNewTodo('');
    }
  };

  const toggleTodo = (id: number) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id? {...todo, completed:!todo.completed } : todo
      )
    );
  };

  const editTodo = (id: number, newText: string) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id? {...todo, text: newText } : todo
      )
    );
  };

  const deleteTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id!== id));
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="添加新事项"
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{ textDecoration: todo.completed? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => editTodo(todo.id, prompt('编辑事项:', todo.text))}>编辑</button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;