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

React是一个用于构建用户界面的JavaScript库，它提供了一种声明式的方式来创建组件和管理状态。在本文中，我们将使用React和Hooks来实现一个简单的待办事项列表，用户可以添加、编辑和删除待办事项。

首先，我们需要创建一个Todo组件，它接收一个todo对象作为属性，并显示它的内容和完成状态。我们还需要给它一个onClick属性，用于切换完成状态，一个onEdit属性，用于进入编辑模式，和一个onDelete属性，用于删除该待办事项。

import React from 'react';

function Todo({ todo, onClick, onEdit, onDelete }) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={onClick}
      />
      {todo.editing ? (
        <input
          type="text"
          value={todo.text}
          onChange={onEdit}
          onBlur={onEdit}
        />
      ) : (
        <span
          style={{
            textDecoration: todo.completed ? 'line-through' : 'none',
          }}
          onDoubleClick={onEdit}
        >
          {todo.text}
        </span>
      )}
      <button onClick={onDelete}>删除</button>
    </li>
  );
}

export default Todo;

Copy

接下来，我们需要创建一个TodoList组件，它接收一个todos数组作为属性，并使用map方法遍历它，为每个todo对象创建一个Todo组件。我们还需要给它一个onToggle属性，用于切换完成状态，一个onEdit属性，用于编辑待办事项，和一个onDelete属性，用于删除待办事项。

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

function TodoList({ todos, onToggle, onEdit, onDelete }) {
  return (
    <ul>
      {todos.map((todo) => (
        <Todo
          key={todo.id}
          todo={todo}
          onClick={() => onToggle(todo.id)}
          onEdit={(e) => onEdit(todo.id, e)}
          onDelete={() => onDelete(todo.id)}
        />
      ))}
    </ul>
  );
}

export default TodoList;

Copy

然后，我们需要创建一个TodoForm组件，它接收一个onSubmit属性，用于添加新的待办事项。我们使用useState Hook来创建一个本地状态value，用于存储输入框的值，并使用onChange事件来更新它。我们还需要使用onSubmit事件来阻止表单的默认行为，并调用onSubmit属性函数来传递value作为参数。

import React, { useState } from 'react';

function TodoForm({ onSubmit }) {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (value.trim()) {
      onSubmit(value);
      setValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        placeholder="请输入待办事项"
      />
      <button type="submit">添加</button>
    </form>
  );
}

export default TodoForm;

Copy

最后，我们需要创建一个App组件，它是我们应用的根组件。我们使用useState Hook来创建一个本地状态todos，用于存储待办事项列表，并使用useEffect Hook来模拟从服务器获取初始数据。