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

在 React 中创建待办事项列表

React 组件的基本概念: React组件是React应用程序的基本构建块，它可以帮助我们将应用程序拆分成小的，可重用的部分。在React Todolist案例中，我们可以学习到如何创建和使用React组件来构建一个简单的待办事项列表。

React状态的基本概念： React状态是React组件的一部分，它可以帮助我们存储和管理组件的数据。在 React Todolist案例中，我们可以学习到如何使用React状态来存储和管理待办事项列表的数据。

要使用React和Redux，需要运行以下命令安装它们：

npm install react react-dom redux react-redux

在项目中创建一个新的文件夹 src，然后在该文件夹中创建两个文件 index.js 和 index.css。

创建基本的组件 在 index.js 中创建一个 TodoList 组件，用于显示待办列表。这个组件应该包含一个文本框和一个添加按钮。当用户点击添加按钮时，应该将文本框中的文本添加到待办列表中。此外，还需要在页面上显示待办列表。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    setTodos([...todos, { text }]);
    setText('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={text} onChange={(e) => setText(e.target.value)} />
        <button>Add</button>
      </form>
      <ul>
      ```
{todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

创建Redux Store

需要在 index.js 中创建 Redux store。Redux store 是一个存储应用程序状态的容器。它是跨组件共享数据的核心部分。

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <TodoList />
  </Provider>,
  document.getElementById('root')
);

创建Reducer

Redux store 需要一个 reducer 来处理 state 的更新。reducer 是一个用于更新 state 的纯函数。它接收一个先前的状态和一个 action，然后返回一个新的状态。在这种情况下，reducer 接收一个 ADD_TODO action，并将新的 todo 添加到列表中。

const initialState = {
  todos: [],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, { text: action.text }] };
    default:
      return state;
  }
}

export default reducer;

创建Action

接下来，在 actions.js 文件中定义 ADD_TODO action：

export const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

在组件中使用Action

现在，需要将 addTodo action 和组件连接起来。这可以通过使用 connect() 函数来完成。

return (
  <li>
    {todo.text}
    <button onClick={() => deleteTodo(index)}>Delete</button>
  </li>

React是一个非常流行的JavaScript库，它被广泛用于构建 Web 应用程序。React 的一个主要特点是它的组件化架构，这使得开发人员可以轻松地构建复杂的用户界面。在本文中，我们将探讨如何使 用React 构建一个 TodoList 应用程序。TodoList 是一个非常简单的应用程序，它允许用户创建待办事项列表。用户可以添加新的待办事项，标记已完成的事项，以及删除不再需要的事项。

添加

修改 handleSubmit 函数，实现这个功能：

const handleSubmit = (event) => {
  event.preventDefault();

  if (text.trim().length === 0) {
    return;
  }

  addTodo(text.trim());
  setText('');
};

只能添加长度非0的待办事项，添加待办事项后，清空文本框中的内容。

删除

实现这个功能，需要在 TODO item 上添加一个删除按钮。由于 Redux store 的更新无法在组件中直接触发，因此需要将 deleteTodo action 添加到 actions.js 文件中。

// actions.js
export const DELETE_TODO = 'DELETE_TODO';

export function deleteTodo(index) {
  return { type: DELETE_TODO, index };
}

在 TODO item 组件中添加一个删除按钮，并将 deleteTodo action 传递到组件中：

import { deleteTodo } from './actions';
return (
  <li>
    {todo.text}
    <button onClick={() => deleteTodo(index)}>Delete</button>
  </li>