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

人间焦虑
85 阅读4分钟

待办事项列表

今天打算用React来实现一个简单的待办事项。

使用React实现待办事项列表有很多方法。以下是其中几种常见的方法：

  1. 使用类组件和React的state：这是最基本和最常见的方法。通过使用类组件和React的state来管理待办事项列表和表单输入。可以使用state来存储待办事项的数组，并通过添加、删除和编辑方法来操作数组。当用户添加或编辑待办事项时，您可以更新state并重新渲染列表。这种方法比较灵活，可以方便地管理和更新待办事项。

  2. 使用函数组件和React的Hooks：随着React Hooks的引入，还可以使用函数组件来管理待办事项列表。可以使用useState Hook来创建一个状态变量来存储待办事项。通过添加、删除和编辑操作来更新状态，并使用map()方法来遍历并渲染待办事项列表。使用Hooks可以使代码更简洁，并且不需要编写类组件。

  3. 使用Redux：当应用变得更加复杂时，还可以使用Redux来管理待办事项列表。Redux是一个状态管理库，可以将应用程序的状态存储在一个中央存储库中，并使用操作来更新状态。您可以创建一个Redux存储来存储待办事项的状态，并使用操作创建器来添加、删除和编辑待办事项。然后，在组件中使用connect()函数来连接到存储，并从存储中获取和更新状态。这种方法适用于大型应用，可以更好地管理状态和组件之间的数据流。

下面是我使用类组件和React的state来管理状态的实现方式的具体步骤。

  1. 创建一个名为TodoList的类组件，并导入React：
import React from 'react';

class TodoList extends React.Component {
  ...
}
  1. 在构造函数中初始化两个状态：todos和input。
constructor(props) {
  super(props);
  this.state = {
    todos: [],
    input: '',
  };
}
  1. 添加一个用于添加待办事项的方法addTodo。在这个方法中，获取input状态的值，如果该值不为空，则将其添加到todos状态中，并将input状态重置为空。
addTodo = () => {
  const { input, todos } = this.state;
  if (input.trim() !== '') {
    this.setState({
      todos: [...todos, input],
      input: ''
    });
  }
};
  1. 添加一个用于删除待办事项的方法deleteTodo。在这个方法中，使用索引参数来删除todos状态中的相应待办事项。
deleteTodo = (index) => {
  const { todos } = this.state;
  const newTodos = [...todos];
  newTodos.splice(index, 1);
  this.setState({
    todos: newTodos
  });
};
  1. 添加一个用于编辑待办事项的方法editTodo。在这个方法中，使用索引和新值参数来修改todos状态中的相应待办事项。
editTodo = (index, value) => {
  const { todos } = this.state;
  const newTodos = [...todos];
  newTodos[index] = value;
  this.setState({
    todos: newTodos
  });
};
  1. 在render方法中，渲染界面。将标题、输入框、添加按钮和待办事项列表渲染到页面上。使用todos.map()方法来遍历todos状态，并为每个待办事项渲染文本、删除按钮和编辑按钮。
render() {
  const { todos, input } = this.state;

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => this.setState({ input: e.target.value })}
      />
      <button onClick={this.addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => this.deleteTodo(index)}>Delete</button>
            <button onClick={() => this.editTodo(index, prompt('Edit todo:', todo))}>
              Edit
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
  1. 导出TodoList组件，以便在其他地方使用。
export default TodoList;
  1. 在根组件（例如App.js）中使用TodoList组件来渲染待办事项列表。
import React from 'react';
import TodoList from './TodoList';

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

export default App;

在上面的代码中，我们定义了一个名为TodoList的类组件，并在构造函数中初始化了两个状态todos和input。todos用于存储待办事项列表，而input用于存储用户输入的新待办事项。

我们将添加、删除和编辑待办事项的函数放在类组件的实例方法中。在addTodo方法中，我们将用户输入的新待办事项添加到todos状态中，并清空输入框的内容。deleteTodo和editTodo方法和函数组件的实现方式相同。

在render方法中，我们渲染了一个包含标题、输入框、添加按钮和待办事项列表的界面。待办事项列表部分使用了todos.map()方法来遍历todos状态，并渲染每个待办事项的文本、删除按钮和编辑按钮。删除按钮和编辑按钮分别调用deleteTodo和editTodo方法，并传入相应的索引和新值。

最后，我们导出TodoList组件，以便在其他地方使用。

在应用的根组件（App.js）中，我们可以使用TodoList组件来渲染待办事项列表。将以下代码替换App.js中的内容：

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

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

export default App;

现在，在终端中运行以下命令来启动React应用：

npm start

打开浏览器并访问http://localhost:3000，将看到一个带有输入框和待办事项列表的界面。您可以添加、删除或编辑待办事项。

这就是使用类组件和React的state来实现待办事项列表的基本过程。尽管使用类组件需要更多的代码，但这是React早期版本的主要用法，在较新的React版本中，函数组件和Hooks已成为更常用的方式，可以根据自己的需求选择使用哪种方式。

avatar
文章
阅读
粉丝