import './index.css' import dayjs from 'dayjs' import { useState } from 'react' import { finished } from 'stream' export interface ITodo { id: string content: string finished: boolean ctime: number mtime: number } export default function TodoList(props: { list: ITodo[] }) { function Delete(id: string) { const list = [...props.list] list.map((item) => { if (item.id === id) return '' }) } function onChange(id: string) { const list = [...props.list] list.map((item) => { if (item.id === id) item.finished = true else item.finished = false }) } return ( <div className="section"> {props.list.map((item) => { return ( <div key={item.id} className={ item.finished ? 'todo-item' : 'todo-item .todo-finished' }> <button onClick={() => onChange(item.id)} className="iconfont icon-checkbox"></button> <span className="todo-title">{item.content}</span> <b>{dayjs().format('MM月DD日 HH:mm:ss')}</b> <button onClick={() => Delete(item.id)} className="iconfont icon-delete"></button> </div> ) })} </div> ) }，这段代码如何实现删除和更改完成状态

要实现删除和更改完成状态，可以在函数组件中添加对应的处理函数。

删除可以使用数组的 filter 方法，删除指定 id 的 todo，然后更新组件状态。

更改完成状态可以通过遍历所有 todo，找到指定 id 的 todo，更改其 finished 属性为 true，其余 todo 的 finished 属性为 false，然后更新组件状态。

修改后的代码如下：

import './index.css';
import dayjs from 'dayjs';
import { useState } from 'react';

export interface ITodo {
  id: string;
  content: string;
  finished: boolean;
  ctime: number;
  mtime: number;
}

export default function TodoList(props: { list: ITodo[] }) {
  const [todos, setTodos] = useState(props.list);

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

  function toggleFinished(id: string) {
    const newTodos = todos.map((todo) => {
      if (todo.id === id) {
        return {
          ...todo,
          finished: true,
        };
      } else {
        return {
          ...todo,
          finished: false,
        };
      }
    });
    setTodos(newTodos);
  }

  return (
    <div className="section">
      {todos.map((item) => {
        return (
          <div
            key={item.id}
            className={item.finished ? 'todo-item' : 'todo-item .todo-finished'}
          >
            <button
              onClick={() => toggleFinished(item.id)}
              className="iconfont icon-checkbox"
            ></button>
            <span className="todo-title">{item.content}</span>
            <b>{dayjs(item.ctime).format('MM月DD日 HH:mm:ss')}</b>
            <button
              onClick={() => deleteTodo(item.id)}
              className="iconfont icon-delete"
            ></button>
          </div>
        );
      })}
    </div>
  );
}

其中，useState 函数返回的第一个元素是当前状态的值，第二个元素是更新状态的函数。调用更新状态的函数会重新渲染组件，并将新的状态值传递给组件。