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

实现思路:因为待办事项是动态的,所以使用class创建动态组件来做.首先定义好要用到的属性和方法.然后最后用render返回渲染结果即可.(react会自动调用render方法) 完整代码如下:

import { Component } from "react";
class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newTask: "",
      editedTask: "",
      tasks: [],
      showEditModal: false,
      editIndex: -1
    };
  }

  addTask = () => {
    const { newTask, tasks } = this.state;
    if (newTask !== "") {
      this.setState({
        tasks: [...tasks, newTask],
        newTask: ""
      });
    }
  };

  editTask = (index) => {
    const { tasks } = this.state;
    this.setState({
      showEditModal: true,
      editIndex: index,
      editedTask: tasks[index]
    });
  };

  saveTask = () => {
    const { editedTask, editIndex, tasks } = this.state;
    if (editedTask !== "") {
      tasks[editIndex] = editedTask;
      this.setState({
        tasks,
        showEditModal: false,
        editIndex: -1,
        editedTask: ""
      });
    }
  };

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

  closeEditModal = () => {
    this.setState({
      showEditModal: false,
      editIndex: -1,
      editedTask: ""
    });
  };

  render() {
    const { newTask, editedTask, tasks, showEditModal } = this.state;

    return (
      <div>
        <h2>待办事项列表</h2>
        <input
          type="text"
          value={newTask}
          onChange={(event) =>
            this.setState({ newTask: event.target.value })
          }
        />
        <button onClick={this.addTask}>添加</button>
        <ul>
          {tasks.map((task, index) => (
            <li key={index} className="item">
              <span>{task}</span>
              <button onClick={() => this.editTask(index)}>编辑</button>
              <button onClick={() => this.deleteTask(index)}>删除</button>
            </li>
          ))}
        </ul>
        {showEditModal && (
          <div>
            <input
              type="text"
              value={editedTask}
              onChange={(event) =>
                this.setState({ editedTask: event.target.value })
              }
            />
            <button onClick={this.saveTask}>保存</button>
          </div>
        )}
      </div>
    );
  }
}

export default TodoList;