I am making a todo list with react. When I click the create task button it creates a div with a delete button in it. I want to be able to click the delete button to delete that task but instead it deletes all of the tasks and no more tasks can be added after that. I also tried using useState but nothing was being deleted.

我正在和Reaction一起列一个待办事项清单。当我单击创建任务按钮时，它会创建一个带有删除按钮的div。我希望能够单击删除按钮来删除该任务，但它会删除所有任务，并且在此之后无法添加更多任务。我也尝试使用useState，但没有删除任何内容。

import React, { useState, useRef } from 'react';
import DelIcon from './assets/close-btn.png';
import './styling/home.scss';

let taskArr = [];

function Task(todo) {
    this.todo = todo;
}

function home() {
    const inputRef = useRef();

    const [deleteTask, setDelete] = useState(false);

    const taskContainer = document.createElement('div');
    taskContainer.className = 'task-container';
    document.body.appendChild(taskContainer);

    let taskDiv = document.querySelector('.task-div');

    const handleDel = () => {
        for (let i = 0; i < taskArr.length; i++) {
            taskContainer.remove(taskDiv);
            taskArr.splice(taskDiv, 1);
        }
    };

    console.log(deleteTask);

    const handleClick = () => {
        let todo = inputRef.current.value;
        let newTask = new Task(todo);
        taskArr.push(newTask);
        console.log(taskArr);
        inputRef.current.value = '';

        if (taskArr[taskArr.length - 1] !== '') {
            const taskDiv = document.createElement('div');
            taskDiv.className = 'task-div';

            const taskText = document.createElement('p');
            const deleteBtn = document.createElement('button');

            taskText.innerText = taskArr[taskArr.length - 1].todo;
            taskContainer.appendChild(taskDiv);
            taskDiv.appendChild(taskText);
            taskDiv.appendChild(deleteBtn);
            taskContainer.appendChild(taskDiv);

            deleteBtn.innerHTML = `<img src=${DelIcon} alt='delete-btn' />`;
            deleteBtn.className = 'delete-btn';
            deleteBtn.onclick = handleDel;
        }
    };
    return (
        <div id='home-container'>
            <input type='text' ref={inputRef} maxLength={40} />
            <button onClick={handleClick}>Add</button>
        </div>
    );
}

export default home;

The issue you're facing is that the handleDel function deletes all tasks from the taskContainer every time it's called. Instead, you should delete only the specific task associated with the delete button that was clicked.

您面临的问题是，handleDel函数每次被调用时都会从taskContainer中删除所有任务。相反，您应该只删除与所单击的“删除”按钮关联的特定任务。

Here's a modified version of your code that should work as expected:

以下是您的代码的修改版本，应该可以按预期工作：

import React, { useState } from 'react';
import DelIcon from './assets/close-btn.png';
import './styling/home.scss';

function Task(todo) {
  this.todo = todo;
}

function Home() {
  const [tasks, setTasks] = useState([]);

  const handleDelete = (index) => {
    const updatedTasks = [...tasks];
    updatedTasks.splice(index, 1);
    setTasks(updatedTasks);
  };

  const handleClick = () => {
    const todo = inputRef.current.value;
    const newTask = new Task(todo);
    setTasks([...tasks, newTask]);
    inputRef.current.value = '';
  };

  return (
    <div id='home-container'>
      <input type='text' ref={inputRef} maxLength={40} />
      <button onClick={handleClick}>Add</button>
      <div className='task-container'>
        {tasks.map((task, index) => (
          <div className='task-div' key={index}>
            <p>{task.todo}</p>
            <button className='delete-btn' onClick={() => handleDelete(index)}>
              <img src={DelIcon} alt='delete-btn' />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Home;

Hope this could solve your problem.

希望这能解决你的问题。