待办事项列表应用程序反应代码 - Javascript

该待办事项列表应用程序使用Javascript编写，可以帮助用户跟踪自己的任务和日常事宜。以下是应用程序的主要功能：

1. 添加新任务：用户可以使用输入框添加新任务，并且选择任务的优先级。

2. 标记完成：用户可以标记任务为完成状态，也可以标记为未完成状态，以便随时跟踪任务的进度。

3. 删除任务：用户可以删除不再需要的任务，从而保持待办事项列表的整洁。

4. 过滤列表：用户可以使用过滤器查找任务，例如按优先级或任务状态过滤。

以下为应用程序的部分代码：

类

Task类

Task类用于表示一个待办事项，它具有名称、优先级和状态属性。

class Task {
  constructor(name, priority) {
    this.name = name;
    this.priority = priority;
    this.completed = false;
  }
}

TaskList类

TaskList类用于管理任务列表，它具有添加、删除和过滤任务的方法。

class TaskList {
  constructor() {
    this.tasks = [];
  }

  addTask(name, priority) {
    const task = new Task(name, priority);
    this.tasks.push(task);
  }

  removeTask(task) {
    const index = this.tasks.indexOf(task);
    if (index >= 0) {
      this.tasks.splice(index, 1);
    }
  }

  filterTasks(filter) {
    if (filter === 'all') {
      return this.tasks;
    } else if (filter === 'completed') {
      return this.tasks.filter(task => task.completed);
    } else if (filter === 'pending') {
      return this.tasks.filter(task => !task.completed);
    } else {
      return [];
    }
  }
}

组件

App组件

App组件是该应用程序的根组件，它包含了一个任务表单组件和一个任务列表组件。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      taskList: new TaskList(),
      filter: 'all',
    };
  }

  handleAddTask = (name, priority) => {
    this.state.taskList.addTask(name, priority);
    this.forceUpdate();
  };

  handleRemoveTask = (task) => {
    this.state.taskList.removeTask(task);
    this.forceUpdate();
  };

  handleFilter = (event) => {
    const filter = event.target.value;
    this.setState({ filter });
  };

  render() {
    const tasks = this.state.taskList.filterTasks(this.state.filter);
    return (
      <div>
        <TaskForm onAddTask={this.handleAddTask} />
        <TaskList tasks={tasks} onRemoveTask={this.handleRemoveTask} />
        <TaskFilter value={this.state.filter} onChange={this.handleFilter} />
      </div>
    );
  }
}

TaskForm组件

TaskForm组件包含一个输入框和一个下拉菜单，用于添加新任务。

class TaskForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      priority: 'low',
    };
  }

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  handlePriorityChange = (event) => {
    this.setState({ priority: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.onAddTask(this.state.name, this.state.priority);
    this.setState({ name: '', priority: 'low' });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.name} onChange={this.handleNameChange} placeholder="任务名称" />
        <select value={this.state.priority} onChange={this.handlePriorityChange}>
          <option value="low">低优先级</option>
          <option value="medium">中优先级</option>
          <option value="high">高优先级</option>
        </select>
        <button type="submit">添加任务</button>
      </form>
    );
  }
}

TaskList组件

TaskList组件显示所有的任务，并提供标记完成和删除任务的功能。

class TaskList extends React.Component {
  handleRemove = (task) => {
    this.props.onRemoveTask(task);
  };

  handleComplete = (task) => {
    task.completed = !task.completed;
    this.forceUpdate();
  };

  render() {
    return (
      <ul>
        {this.props.tasks.map((task, index) => (
          <li key={index}>
            <input type="checkbox" checked={task.completed} onChange={() => this.handleComplete(task)} />
            {task.name} ({task.priority})
            <button onClick={() => this.handleRemove(task)}>删除</button>
          </li>
        ))}
      </ul>
    );
  }
}

TaskFilter组件

TaskFilter组件显示任务列表的过滤器，可以根据所有任务、已完成任务和待办任务来过滤任务列表。

class TaskFilter extends React.Component {
  handleChange = (event) => {
    this.props.onChange(event);
  };

  render() {
    return (
      <div>
        <label>显示：</label>
        <select value={this.props.value} onChange={this.handleChange}>
          <option value="all">所有任务</option>
          <option value="completed">已完成任务</option>
          <option value="pending">待办任务</option>
        </select>
      </div>
    );
  }
}

以上是待办事项列表应用程序反应代码 - Javascript的介绍。该程序实现了任务列表的添加、删除、过滤和标记完成等基本功能，可以帮助用户管理日常生活事宜。