使用React构建待办事项列表应用|青训营

不染风
61 阅读3分钟

摘要：React是一种流行的JavaScript库，用于构建用户界面。本文将介绍如何使用React来开发一个简单的待办事项列表应用。我们将学习如何添加、编辑和删除待办事项，并使用React组件来组织应用代码。

引言：
随着现代生活的快节奏，我们经常需要跟踪自己的任务和待办事项。为了更高效地管理这些任务，我们可以使用一个简单而实用的待办事项列表应用。本文将引导您如何使用React构建这样一个应用，使您能够添加、编辑和删除待办事项。

创建React应用程序
首先，确保您的开发环境中已经安装了Node.js。然后，我们使用create-react-app工具来快速创建一个新的React应用程序。在命令行中运行以下命令：

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

这将在当前目录下创建一个名为"todo-app"的新React应用程序，并进入该目录。

添加组件
现在我们将创建一个名为"TodoList"的React组件，它将负责渲染待办事项列表。在src目录下创建一个新文件TodoList.js，并添加以下代码：

import React from 'react';

class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Todo List</h1>
        {/* 待办事项列表 */}
      </div>
    );
  }
}

export default TodoList;

接下来，我们需要创建一个子组件TodoItem来表示单个待办事项。在src目录下创建一个新文件TodoItem.js，并添加以下代码：

import React from 'react';

class TodoItem extends React.Component {
  render() {
    return (
      <div>
        {/* 待办事项内容 */}
      </div>
    );
  }
}

export default TodoItem;

管理待办事项列表
现在我们需要在TodoList组件中管理待办事项的状态。我们可以使用组件的state属性来实现这一点。修改TodoList.js文件中的代码：

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

class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [], // 待办事项列表
      currentTodo: '', // 当前待办事项
    };
  }

  // 处理添加待办事项事件
  handleAddTodo = () => {
    if (this.state.currentTodo !== '') {
      const todos = [...this.state.todos, this.state.currentTodo];
      this.setState({ todos, currentTodo: '' });
    }
  };

  // 处理编辑待办事项事件
  handleEditTodo = (index, newValue) => {
    const todos = [...this.state.todos];
    todos[index] = newValue;
    this.setState({ todos });
  };

  // 处理删除待办事项事件
  handleDeleteTodo = (index) => {
    const todos = [...this.state.todos];
    todos.splice(index, 1);
    this.setState({ todos });
  };

  render() {
    return (
      <div>
        <h1>Todo List</h1>
        {/* 待办事项列表 */}
        {this.state.todos.map((todo, index) => (
          <TodoItem
            key={index}
            index={index}
            todo={todo}
            onEdit={this.handleEditTodo}
            onDelete={this.handleDeleteTodo}
          />
        ))}
        {/* 添加待办事项表单 */}
        <input
          type="text"
          value={this.state.currentTodo}
          onChange={(e) => this.setState({ currentTodo: e.target.value })}
        />
        <button onClick={this.handleAddTodo}>Add</button>
      </div>
    );
  }
}

export default TodoList;

渲染待办事项
现在我们需要在TodoItem组件中渲染单个待办事项。在TodoItem.js文件中添加以下代码：

import React from 'react';

class TodoItem extends React.Component {
  constructor(props) {
    super(props

    this.state = {
      isEditing: false,
      editedTodo: this.props.todo,
    };
  }

  // 处理编辑事件
  handleEdit = () => {
    this.setState({ isEditing: true });
  };

  // 处理保存编辑事件
  handleSave = () => {
    this.props.onEdit(this.props.index, this.state.editedTodo);
    this.setState({ isEditing: false });
  };

  // 处理取消编辑事件
  handleCancel = () => {
    this.setState({ isEditing: false, editedTodo: this.props.todo });
  };

  // 处理删除事件
  handleDelete = () => {
    this.props.onDelete(this.props.index);
  };

  render() {
    return (
      <div>
        {this.state.isEditing ? (
          <div>
            <input
              type="text"
              value={this.state.editedTodo}
              onChange={(e) => this.setState({ editedTodo: e.target.value })}
            />
            <button onClick={this.handleSave}>Save</button>
            <button onClick={this.handleCancel}>Cancel</button>
          </div>
        ) : (
          <div>
            <span>{this.props.todo}</span>
            <button onClick={this.handleEdit}>Edit</button>
            <button onClick={this.handleDelete}>Delete</button>
          </div>
        )}
      </div>
    );
  }
}

export default TodoItem;

在应用中使用组件
现在我们可以在应用中使用我们创建的组件。在App.js文件中添加以下代码：

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

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <TodoList />
      </div>
    );
  }
}

export default App;

测试应用
现在我们可以运行应用并测试它的功能。在命令行中运行以下命令：

npm start

这将在浏览器中打开一个新的标签页，并自动加载我们的待办事项列表应用。您可以尝试添加、编辑和删除待办事项，并观察应用的行为。

结论：
在本文中，我们使用React构建了一个简单的待办事项列表应用。通过创建TodoList和TodoItem组件，我们实现了添加、编辑和删除待办事项的功能。通过使用React的状态管理机制，我们能够轻松地更新和渲染待办事项列表。希望本文对您理解和使用React来构建应用程序有所帮助。

参考链接：

avatar
文章
阅读
粉丝