本笔记为实践笔记，使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项；

项目展示

项目托管于码上掘金平台，可在下方预览和查阅源码。

为了减少文章代码量，文章仅提及部分核心代码片段，不展示完整源码

完整源码请查阅下面的码上掘金

项目拆解

1. 构建TodoApp组件

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [],
      newTask: '',
      showError: false,
    };
  }

创建一个名为TodoApp的React组件。
在构造函数中初始化组件的初始状态，包括tasks用于存储任务列表，newTask用于存储输入框中的值，以及showError用于表示是否显示错误信息。

2. 监听输入框变化

handleInputChange = (event) => {
  this.setState({ newTask: event.target.value });
}

handleInputChange方法用于监听输入框的变化。
当输入框的内容发生变化时，将新的值更新到newTask状态中。

3. 添加新任务

addTask = () => {
  const { tasks, newTask } = this.state;
  if (newTask.trim() !== '') {
    const newTasks = [...tasks, newTask];
    this.setState({ tasks: newTasks, newTask: '', showError: false });
  } else {
    this.setState({ showError: true });
  }
}

addTask方法用于添加新任务。
当点击“新增任务”按钮时，首先判断newTask的值是否为空。
如果newTask的值不为空，将其加入到tasks数组末尾，并清空输入框的值和错误标志。
如果newTask的值为空，将错误标志设为true，以显示错误信息。

4. 删除任务

deleteTask = (index) => {
  const { tasks } = this.state;
  const newTasks = [...tasks];
  newTasks.splice(index, 1);
  this.setState({ tasks: newTasks });
}

deleteTask方法用于删除任务。
当点击删除按钮时，根据任务的索引将其从tasks数组中删除。

5. 渲染组件

render() {
  const { tasks, newTask, showError } = this.state;
  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={newTask} onChange={this.handleInputChange} />
      <button onClick={this.addTask}>新增任务</button>
      {showError && <p className="error-message">请输入有效的任务名称</p>}
      <div>
        {
          tasks.map((task, index) => (
            <div className="todo-item" key={index}>
              <div>{task}</div>
              <button className="delete-button" onClick={() => this.deleteTask(index)}>×</button>
            </div>
          ))
        }
      </div>
    </div>
  );
}

render函数用于渲染组件的内容和结构。
首先渲染一个标题和一个输入框，通过value属性绑定newTask的值，onChange事件监听输入框的变化，将变化后的值传递给handleInputChange方法。
然后渲染一个“新增任务”的按钮，点击时调用addTask方法。
如果showError为true，则渲染一个错误提示信息。
接着，使用tasks.map方法遍历tasks数组，渲染每个任务的内容和一个删除按钮。点击删除按钮时，调用deleteTask方法，并将任务的索引传递给它。

6. 渲染组件到页面

ReactDOM.render(<TodoApp />, document.getElementById('root'));

使用ReactDOM.render将TodoApp组件渲染到具有id为root的HTML元素中，以将待办事项列表显示在页面上。

项目知识点

这个TodoApp项目使用了以下React知识点：

组件的创建和生命周期：通过创建TodoApp组件并继承React.Component，实现了一个React组件。同时，在构造函数中初始化组件的初始状态，并在render方法中渲染组件的内容。
状态管理：使用this.state来定义组件的状态，包括tasks、newTask和showError。通过setState方法更新状态，并实现界面的动态更新。
事件处理：通过定义事件处理方法，如handleInputChange、addTask和deleteTask等，处理输入框的变化、添加任务和删除任务的行为。
条件渲染：使用条件渲染来控制错误信息的显示，根据showError的值决定是否渲染错误提示。
列表渲染：通过tasks.map遍历tasks数组，渲染每个任务的内容和对应的删除按钮。
受控组件：通过将输入框的值与newTask状态进行绑定，实现了受控组件，以便监听和更新输入框的内容。

感悟

通过完成这个项目，我对React的基本概念和用法有了更深入的理解

总的来说，这个项目帮助我熟悉了React的基本概念和用法，为我进一步学习和开发更复杂的React应用打下了坚实的基础。

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

项目展示

项目拆解

1. 构建TodoApp组件

2. 监听输入框变化

3. 添加新任务

4. 删除任务

5. 渲染组件

6. 渲染组件到页面

项目知识点

感悟