React 实现待办事项列表 ｜ 青训营

当我们在创建React应用程序时，通常会使用create-react-app工具来帮助我们快速设置和配置一个新的React项目。这个工具可以帮助我们生成一个基本的项目结构，包括一些必要的配置和依赖项。

首先，我们需要确保在本地安装了create-react-app工具。如果没有安装，可以使用以下命令进行安装：

npm install -g create-react-app

安装完成后，我们可以在终端中运行以下命令来创建一个新的React应用程序：

create-react-app todo-app

这将在当前目录下创建一个名为todo-app的新文件夹，并生成一个基本的React项目结构。

接下来，我们进入到新创建的todo-app文件夹中，并打开其中的src文件夹。在src文件夹中，我们可以看到一个名为App.js的文件，这是我们的主应用程序组件。

我们可以在App.js文件中编写我们的待办事项列表组件。在这个组件中，我们将使用React的useState钩子函数来管理待办事项的列表和输入框的值。

首先，我们导入React和useState钩子函数：

import React, { useState } from 'react';

然后，我们创建一个名为TodoList的函数组件，并在其中定义我们的状态变量和事件处理函数：

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

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const handleEditTodo = (index, newValue) => {
    const updatedTodos = [...todos];
    updatedTodos[index] = newValue;
    setTodos(updatedTodos);
  };

  const handleDeleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  // ...
}

在上述代码中，我们使用useState钩子函数来定义两个状态变量：todos保存待办事项的列表，inputValue保存用户在输入框中输入的值。

接下来，我们定义了三个事件处理函数：handleInputChange用于更新inputValue的值，handleAddTodo用于添加新的待办事项到列表中，handleEditTodo用于编辑待办事项的值，handleDeleteTodo用于删除待办事项。

在组件的返回部分，我们渲染了一个标题、一个输入框、一个添加按钮和一个待办事项列表：

return (
  <div>
    <h1>待办事项列表</h1>
    <input type="text" value={inputValue} onChange={handleInputChange} />
    <button onClick={handleAddTodo}>添加</button>
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          <input
            type="text"
            value={todo}
            onChange={(e) => handleEditTodo(index, e.target.value)}
          />
          <button onClick={() => handleDeleteTodo(index)}>删除</button>
        </li>
      ))}
    </ul>
  </div>
);

在待办事项列表中，我们使用map方法遍历todos数组，并为每个待办事项渲染一个列表项。列表项包含一个输入框和一个删除按钮。输入框的值绑定到对应的待办事项，以便用户可以编辑它。删除按钮点击时，调用handleDeleteTodo函数删除对应的待办事项。

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

接下来，我们返回到App.js文件，并编写以下代码：

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

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

export default App;

在上述代码中，我们导入TodoList组件，并在App组件中使用它。

最后，我们创建一个名为 index.js 的文件，并编写以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

在上述代码中，我们导入ReactDOM和App组件，并使用ReactDOM.render方法将App组件渲染到HTML页面的根元素中。

现在，我们可以在终端中运行以下命令来启动应用程序：

npm start

这将启动一个开发服务器，并在浏览器中打开应用程序。你将看到一个简单的待办事项列表，你可以在输入框中添加新的待办事项，编辑已有的待办事项，以及删除待办事项。

通过以上步骤，我们使用React实现了一个简单的待办事项列表。用户可以添加、编辑和删除待办事项。这个例子展示了如何使用React的状态和事件处理来管理和操作组件的数据。当然，我们可以根据实际需求进行扩展和修改。