使用React 实现一个简单的待办事项列表 ｜ 青训营

尘陌it
89 阅读4分钟

下面是一个使用React实现的简单待办事项列表的示例代码：

当用户在输入栏中输入待办事项并点击“添加”按钮时，将调用addTodo函数。在这篇博客中，我们将详细分析待办事项列表的代码实现。

首先，我们需要定义一个状态todos来存储待办事项列表以及inputValue来存储用户输入的值。我们将使用useState钩子来初始化和更新这些状态。

const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');

接下来，我们定义addTodo函数来添加新的待办事项。

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

首先，我们使用trim()方法检查输入值是否为空格或未输入任何内容。如果不是空值，就创建一个新的待办事项对象，包含一个唯一的id（使用Date.now()生成）、待办事项的文本内容和一个isEditing属性表示是否处于编辑模式。然后，使用展开运算符[...todos] 复制现有的待办事项列表，将新的待办事项对象添加到该副本中。最后，使用setTodos更新待办事项列表，并通过setInputValue('')清空输入栏。

接下来，我们需要实现编辑和删除待办事项的功能。

const editTodo = (id, newText) => {
  const updatedTodos = todos.map(todo => {
    if (todo.id === id) {
      return { ...todo, text: newText, isEditing: false };
    }
    return todo;
  });
  setTodos(updatedTodos);
};

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

editTodo函数接受一个id和新的文本内容newText作为参数。它通过使用map方法遍历待办事项列表，根据指定的id找到对应的待办事项。当找到匹配的待办事项时，创建一个新的待办事项对象，使用新的文本内容更新text属性，并将isEditing属性设置为false，表示结束编辑模式。对于其他的待办事项，返回原始对象。最后，使用setTodos更新待办事项列表。

deleteTodo函数与editTodo类似，它通过使用filter方法过滤待办事项列表中与给定id不一致的项目，从而删除指定的待办事项。

在渲染待办事项列表时，我们根据isEditing属性来确定待办事项的显示模式。

const renderTodos = () => {
  return todos.map(todo => (
    <div key={todo.id}>
      {todo.isEditing ? (
        // 编辑模式
        <div>
          <input
            type="text"
            value={todo.text}
            onChange={e => editTodo(todo.id, e.target.value)}
          />
          <button onClick={() => editTodo(todo.id, todo.text)}>保存</button>
        </div>
      ) : (
        // 显示模式
        <div>
          <span>{todo.text}</span>
          <button onClick={() => setTodos(
          todos.map((currentTodo) => {
            if (currentTodo.id === todo.id) {
              return {...currentTodo, isEditing: !currentTodo.isEditing}
            }
            return currentTodo
          }))}>编辑</button>
          <button onClick={() => deleteTodo(todo.id)}>删除</button>
        </div>
      )}
    </div>
  ));
};

如果待办事项的isEditing属性为true，渲染编辑模式，显示一个可编辑的输入框和一个保存按钮。输入框的初始值为待办事项的当前文本内容，通过onChange事件监听输入内容的变化，并调用editTodo函数更新待办事项的文本内容。

如果待办事项的isEditing属性为false，渲染显示模式，显示待办事项的文本内容，以及一个编辑按钮和一个删除按钮。当用户点击编辑按钮时，isEditing属性会切换为true，触发重新渲染。

最后，我们可以在组件中渲染待办事项列表和输入框。

return (
  <div>
    <h1>待办事项列表</h1>
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>添加</button>
    </div>
    {renderTodos()}
  </div>
);

在渲染部分，我们创建一个标题和一个包含输入框、添加按钮的区域。在输入框中，我们通过value属性绑定inputValue值，并通过onChange事件监听输入框内容的变化，并调用setInputValue函数更新输入值。

最后，通过调用renderTodos函数来渲染待办事项列表。

以上是一个简单的待办事项列表的实现，用户可以通过输入框添加新的待办事项，并通过编辑和删除按钮来修改和删除已有的待办事项。

代码： 首先，你需要创建一个React组件TodoList来表示整个待办事项列表：

import React, { useState } from 'react';

const TodoList = () => {
  // 初始化待办事项列表
  const [todos, setTodos] = useState([]);
  // 当前待办事项的输入值
  const [inputValue, setInputValue] = useState('');

  // 添加一个待办事项
  const addTodo = () => {
    if (inputValue.trim() !== '') {
      // 创建一个新的待办事项对象
      const newTodo = {
        id: Date.now(),
        text: inputValue,
        isEditing: false,
      };
      // 将新的待办事项添加到列表中
      setTodos([...todos, newTodo]);
      // 清空输入框
      setInputValue('');
    }
  };

  // 编辑一个待办事项
  const editTodo = (id, newText) => {
    // 根据id找到待办事项
    const updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        // 更新待办事项的文本
        return { ...todo, text: newText, isEditing: false };
      }
      return todo;
    });
    // 更新列表
    setTodos(updatedTodos);
  };

  // 删除一个待办事项
  const deleteTodo = id => {
    // 过滤掉需要删除的待办事项
    const updatedTodos = todos.filter(todo => todo.id !== id);
    // 更新列表
    setTodos(updatedTodos);
  };

  // 渲染待办事项列表
  const renderTodos = () => {
    return todos.map(todo => (
      <div key={todo.id}>
        {todo.isEditing ? (
          // 编辑模式
          <div>
            <input
              type="text"
              value={todo.text}
              onChange={e => editTodo(todo.id, e.target.value)}
            />
            <button onClick={() => editTodo(todo.id, todo.text)}>保存</button>
          </div>
        ) : (
          // 显示模式
          <div>
            <span>{todo.text}</span>
            <button onClick={() => setTodos(
            todos.map((currentTodo) => {
              if (currentTodo.id === todo.id) {
                return {...currentTodo, isEditing: !currentTodo.isEditing}
              }
              return currentTodo
            }))}>编辑</button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </div>
        )}
      </div>
    ));
  };

  return (
    <div>
      <h2>Todo List</h2>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
        />
        <button onClick={addTodo}>添加</button>
      </div>
      <div>
        {renderTodos()}
      </div>
    </div>
  );
};

export default TodoList;

然后，你可以在你的应用中使用TodoList组件来展示待办事项列表：

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

const App = () => {
  return (
    <div>
      <TodoList />
    </div>
  );
};

export default App;

你可以将以上代码保存在同一个文件中，使用你喜欢的构建工具（例如create-react-app）来运行应用。这样，你就可以在浏览器中看到一个简单的待办事项列表，用户可以添加、编辑和删除待办事项了。

希望这篇博客对你理解待办事项列表的实现有所帮助！

avatar
文章
阅读
粉丝