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

1. 项目结构

首先，创建一个新的 React 项目：

npx create-react-app todo-app
cd todo-app

2. 组件设计

我们将创建以下组件：

• App：主组件，管理待办事项的状态。
• TodoList：显示待办事项列表。
• TodoItem：显示单个待办事项，并提供编辑和删除功能。
• AddTodo：添加新的待办事项。

3. 实现代码

App.js

import React, { useState } from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

function App() {
  const [todos, setTodos] = useState([]);

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

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

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

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      <AddTodo addTodo={addTodo} />
      <TodoList todos={todos} deleteTodo={deleteTodo} editTodo={editTodo} />
    </div>
  );
}

export default App;

TodoList.js

import React from 'react';
import TodoItem from './TodoItem';

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

export default TodoList;

TodoItem.js

import React, { useState } from 'react';

function TodoItem({ todo, deleteTodo, editTodo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(todo.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    editTodo(todo.id, editedText);
    setIsEditing(false);
  };

  const handleDelete = () => {
    deleteTodo(todo.id);
  };

  return (
    <li>
      {isEditing ? (
        <>
          <input 
            type="text" 
            value={editedText} 
            onChange={(e) => setEditedText(e.target.value)} 
          />
          <button onClick={handleSave}>保存</button>
        </>
      ) : (
        <>
          <span>{todo.text}</span>
          <button onClick={handleEdit}>编辑</button>
          <button onClick={handleDelete}>删除</button>
        </>
      )}
    </li>
  );
}

export default TodoItem;

AddTodo.js

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="添加新的待办事项" 
      />
      <button type="submit">添加</button>
    </form>
  );
}

export default AddTodo;

import React, { useState } from 'react';

function Parent() { const [count, setCount] = useState(0);

const increment = () => { setCount(count + 1); };

return (

); }

function Counter({ count }) { return

Count: {count}

; }

function Button({ increment }) { return Increment; }

export default Parent;