前端面试题react写任务列表

任务列表作为一个常见的前端应用，使用React来实现可以让用户简单、高效地管理任务。下面是一个使用React编写的任务列表的简单示例代码：

import React, { useState } from 'react';

function TaskList() {
  // 使用useState来保存任务列表
  const [tasks, setTasks] = useState([]);
  // 使用useState来保存当前用户输入的任务
  const [inputValue, setInputValue] = useState('');

  // 添加任务的处理函数
  const addTask = () => {
    // 将用户输入的任务添加到任务列表中
    setTasks([...tasks, inputValue]);
    // 清空输入框的值
    setInputValue('');
  };

  // 删除任务的处理函数
  const deleteTask = (index) => {
    // 根据索引删除对应的任务
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTask}>Add</button>
      <ul>
        {/* 遍历任务列表并显示 */}
        {tasks.map((task, index) => (
          <li key={index}>
            {task} <button onClick={() => deleteTask(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TaskList;

上述代码中，我们使用React的函数式组件和Hooks来实现任务列表的功能。通过useState管理任务列表和用户输入的任务。用户可以在输入框中输入任务，点击添加按钮将任务添加到任务列表中，并在任务后面显示删除按钮。用户点击删除按钮时，对应的任务将从任务列表中删除。通过这种方式，我们可以实现一个简单的任务列表应用。