使用 React 实现一个简单的待办事项列表，支持添加、编辑和删除待办事项 ｜ 青训营

要使用 React 实现一个简单的待办事项列表，我们需要遵循以下步骤：

1. 首先，确保已经安装了 React 库。如果尚未安装，可以通过以下命令进行安装：

npm install react react-dom  

2. 创建一个新的 React 组件，名为TodoList.js。在这个文件中，我们将定义待办事项列表的状态、添加、编辑和删除待办事项的方法以及渲染列表的 JSX 代码。

import React, { Component } from 'react';
class TodoList extends Component {  
 constructor(props) {  
   super(props);  
   this.state = {  
     todos: [],  
   };  
 }
 handleAddTodo = () => {  
   const newTodo = this.refs.todoInput.value;  
   if (newTodo) {  
     this.setState({ todos: this.state.todos.concat([newTodo]) });  
     this.refs.todoInput.value = '';  
   }  
 };
 handleEditTodo = (index) => {  
   const newTodo = this.refs.todoInput.value;  
   if (newTodo) {  
     this.setState(  
       (prevState) => ({  
         todos: prevState.todos.map((_, i) =>  
           i === index? newTodo : prevState.todos[i]  
         ),  
       }),  
     );  
     this.refs.todoInput.value = '';  
   }  
 };
 handleDeleteTodo = (index) => {  
   this.setState(  
     (prevState) => ({  
       todos: prevState.todos.filter((_, i) => i!== index),  
     }),  
   );  
 };
 render() {  
   return (  
     <div>  
       <h1>待办事项列表</h1>  
       <input  
         type="text"  
         ref="todoInput"  
         placeholder="添加新的待办事项..."  
       />  
       <button onClick={this.handleAddTodo}>添加</button>  
       <ul>  
         {this.state.todos.map((todo, index) => (  
           <li key={index}>  
             {todo}  
             <button onClick={() => this.handleEditTodo(index)}>编辑</button>  
             <button onClick={() => this.handleDeleteTodo(index)}>删除</button>  
           </li>  
         ))}  
       </ul>  
     </div>  
   );  
 }  
}
export default TodoList;  

3. 在主组件（例如App.js）中，导入并使用TodoList组件。

import React from 'react';  
import TodoList from './TodoList';
function App() {  
 return (  
   <div>  
     <TodoList />  
   </div>  
 );  
}
export default App;  

4. 运行 React 应用，用户就可以看到一个简单的待办事项列表，可以添加、编辑和删除待办事项。

npm start  

以上代码示例展示了如何使用 React 实现一个简单的待办事项列表。需要根据实际需求对代码进行调整，例如添加更多的功能或优化用户体验。