使用React实现一个简单列表 | 青训营

使用 React 实现一个简单的待办事项列表是一个常见的实践项目，可以帮助我们熟悉 React 的基本用法和组件化开发思想。在本文中，我们将通过一个具体的示例，来演示如何使用 React 来构建待办事项列表。

首先，在项目的根目录下创建一个名为 TodoList.js 的文件，并在其中编写以下代码：

import React, { useState } from 'react';

const TodoList = () => {

  const [todos, setTodos] = useState([]);

  const [newTodo, setNewTodo] = useState('');

 

  const handleInputChange = (event) => {

    setNewTodo(event.target.value);

  };

 

  const handleAddTodo = () => {

    if (newTodo.trim() !== '') {

      setTodos([...todos, newTodo]);

      setNewTodo('');

    }

  };

 

  const handleEditTodo = (index) => {

    const updatedTodo = prompt('Enter the new todo', todos[index]);

    if (updatedTodo !== null) {

      const updatedTodos = [...todos];

      updatedTodos[index] = updatedTodo;

      setTodos(updatedTodos);

    }

  };

 

  const handleDeleteTodo = (index) => {

    const updatedTodos = [...todos];

    updatedTodos.splice(index, 1);

    setTodos(updatedTodos);

  };

 

  return (

    

  );

};

export default TodoList;

上述代码中，我们首先引入了 React 和 useState 这两个模块。然后我们定义了一个函数组件 TodoList，其中使用了 useState 来创建了两个状态：todos 用于存储待办事项的列表，newTodo 用于存储用户输入的新待办事项。

在组件的渲染部分，我们创建了一个输入框和一个按钮，用于添加新的待办事项。并且通过 onChange 来监听输入框的变化，并更新 newTodo 的值。当用户点击添加按钮时，我们首先检查 newTodo 是否为空，如果不为空，则将其添加至 todos 中，并清空输入框的值。

接下来，我们通过 map 方法遍历 todos 列表，并渲染每个待办事项的列表项。对于每个列表项，我们还添加了编辑和删除按钮，并分别绑定了相应的事件处理函数。在 handleEditTodo 函数中，我们通过输入框来获取用户输入的更新内容，并更新对应的 todos 中的值。在 handleDeleteTodo 函数中，我们通过使用 splice 方法来删除对应的待办事项。

最后，我们通过 export default 将 TodoList 组件导出，以便在其他地方可以引入和使用。

在项目的根目录下的 App.js 文件中，我们可以使用以下代码来渲染 TodoList 组件：

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

const App = () => {

  return (

    

  );

};

export default App;

上述代码中，我们引入了 TodoList 组件，并在 App 组件的渲染部分进行了使用。

最后，我们需要在项目的根目录下的 index.js 文件中，使用以下代码来渲染 App 组件：

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

 

ReactDOM.render(

  <React.StrictMode>

    

  </React.StrictMode>,

  document.getElementById('root')

);

通过上述代码，我们使用React实现了一个简单的待办事项列表。用户可以通过输入框添加新的待办事项，点击编辑按钮进行编辑，点击删除按钮进行删除。这样的实现不仅帮助用户有效地管理待办事项，也让我们更好地理解和掌握了React的基本用法和组件化开发思想。