案例一：

示例图

---参考自“吴悠”大大

原大大用npx的方式创建项目，且为React+TypeScript

而我这里是vite创建，且为React+JS

其实差不多，就是多了类型判断

并且有AI辅助，写起来很容易，原大大用AWS，我用的是CodeGeeX

1.结构

2.App.jsx

import { useState } from 'react'
import AddTodo from './component/AddTodo'
import TodoFilter from './component/TodoFilter'
import TodoList from './component/TodoList'

function App() {
  const [todos, setTodos] = useState([])
  const [filter,setFilter]=useState('all')

  const addTodo = (text) => {
    const newTodo = {
       //id赋值很妙
      id: Date.now(),
      text,
      completed:false
    }
    //复制原来的数组，再增加新的数组
    setTodos([...todos, newTodo])
  }

  const deleteTodo = (id) => {
    const newTodos = todos.filter(todo => todo.id !== id)
    setTodos(newTodos)
  }

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

  const getFilterTodos=()=>{
    switch(filter){ 
      case 'completed':
        return todos.filter(todo=>todo.completed)
      case  'active':
        return todos.filter(todo=>!todo.completed)
      default:
        return todos;
    }
  }

  // 确保在调用之前todos是一个非空数组
  //此处原大大没有，我是因为TodoList报todos类型错误后加的
  let filteredTodos = getFilterTodos();

  return (
    <>
      <h1>todoList</h1>
      <AddTodo addTodo={addTodo}></AddTodo>
      <TodoList todos={filteredTodos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} ></TodoList>
      <TodoFilter setFilter={setFilter}></TodoFilter>
    </>
  )
}

export default App

3.AddTodo.jsx

import { useState } from "react";
function AddTodo ({addTodo}){
    const [text, setText]=useState('');

    const handleSubmit = (e) => {
        // preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
        e.preventDefault();
        if(text.trim()===''){
            return
        }
        //每次点击（提交订单）都调用
        addTodo(text);
        setText('');
    }
    return(
        <form onSubmit={handleSubmit}>
            <input 
                type="text" 
                value={text} 
                name="title" 
                placeholder="Add Todo..."
                onChange={(e)=> setText(e.target.value)}
            />
            <button>新建事项</button>
        </form>
    )
}

export default AddTodo;

3.TodoList.jsx

import TodoItem from "./TodoItem";

function TodoList({todos,toggleTodo,deleteTodo}) {
    return(
        <ul>
            {todos.map(todo => (
                <TodoItem key={todo.id} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo}/>
                ))}
        </ul>
    )
}

export default TodoList;

4.TodoItem.jsx

function TodoItem ({todo,toggleTodo,deleteTodo}){
    return (
        <li style={{textDecoration:todo.completed?'line-through':'none'}}>
            {todo.text}
            <button onClick={()=>toggleTodo(todo.id)}>切换</button>
            <button onClick={()=>deleteTodo(todo.id)}>删除</button>
        </li>
    )
}
export default TodoItem;

5.TodoFilter.jsx

function TodoFilter({setFilter}) {
    return (
        <div>
            <button onClick={()=>setFilter('all')}>全部</button>
            <button onClick={()=>setFilter('active')}>待办</button>
            <button onClick={()=>setFilter('completed')}>已办</button>
        </div>
    )
}

export default TodoFilter;

案例二：

示例图

1.创建项目

npm init vite@latest

选择 React

选择 JS

2.创建todolist组件

3.问AI 怎么写todolist组件代码，生成代码如下

import React, { Component } from 'react';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      currentInput: '',
    };

    // 绑定this到方法上
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  // 输入框值改变时更新state
  handleChange(event) {
    this.setState({ currentInput: event.target.value });
  }

  // 提交新任务时添加到todos数组并清空输入框
  handleSubmit(event) {
    event.preventDefault();
    if (this.state.currentInput.trim() !== '') {
      this.setState(prevState => ({
        todos: [...prevState.todos, this.state.currentInput],
        currentInput: '',
      }));
    }
  }

  // 删除指定任务
  handleDelete(index) {
    this.setState(prevState => ({
      todos: prevState.todos.filter((_, i) => i !== index),
    }));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.currentInput}
            onChange={this.handleChange}
            placeholder="请输入新的待办事项"
          />
          <button type="submit">添加</button>
        </form>
        <ul>
          {this.state.todos.map((todo, index) => (
            <li key={index}>
              {todo}
              <button onClick={() => this.handleDelete(index)}>删除</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoList;

5.import todolist组件

import './App.css'
import TodoList from './component/todolist'

function App() {
  return (
    <>
      <TodoList></TodoList>
    </>
  )
}

export default App

4.最终效果图：