ReactJ总是打印相同的ID

如何解决ReactJ总是打印相同的ID

我是React的新手，正在尝试创建一个包含一些数据的表，但是在打印正确的ID时遇到问题。

首先，我创建了具有表和所有相关元素的父组件。

在<tbody>内，我正在运行一个map()函数，该函数遍历整个array并为每个object返回一个<TaskRow />组件。 / p>

对象数组

let maintenance_task = [
    {
        task_id: 1,task: 'task 1',description: '',date: '2020-02-02'
    },{
        task_id: 2,task: 'task 2',{
        task_id: 3,task: 'task 3',{
        task_id: 4,task: 'task 4',date: '2020-02-02'
    }
]

父组件

<tbody id="list-tasks">
   {
      props.maintenance_task.map( (task,index) => {
         return (
            <TaskRow
               key={ index }
               task={ task } 
            />
         );
      })
   }
</tbody>

子组件。

import React from 'react';

function TaskRow(props) {

    const toggle_delete_task = (task_id) => {

        console.log(task_id);

        const confirm_remove_task = document.getElementById('remove-task');
        const loading_animation = document.getElementById('loading-animation-section');

        confirm_remove_task.classList.toggle('d-block');
        loading_animation.classList.toggle('d-block');
    }

    return (
        <tr>
            <td><p>{ props.task.task }</p></td>
            <td><p>{ props.task.description }</p></td>
            <td><p>{ props.task.date }</p></td>

            <td className="wrap-inputs-task">
                <input type="button" value="Edit" />
                <input type="button" value="Delete" onClick={ () => toggle_delete_task(props.task.task_id) } /> // delete button
            </td>

            <td id="remove-task" className="confirm-remove-task">
                <p>Are you sure you want to remove this task ?</p>

                <span>
                    <input type="button" value="Confirm" />
                    <input type="button" value="Cancel" onClick={ () => toggle_delete_task(props.task.task_id) } /> // cancel button
                </span>
            </td>
        </tr>
    );
}

export default TaskRow;

当我单击删除按钮时，它将运行toggle_delete_task()，它将在控制台中显示当前task_id并显示remove-task元素。

问题出在之后，当我单击“取消”按钮并运行相同的功能toggle_delete_task()时，它将始终在控制台中打印1，这是{{1 }}放在task_id中。

我真的很感谢您尝试解决此问题的任何帮助，感谢您的帮助，并希望有人能找出问题所在。

解决方法

您所有的remove-task元素都具有相同的id，因此，当您执行document.getElementById('remove-task')时，只会选择属于remove-task的第一个task 1元素。

您必须给他们每个人一个不同的id，可能要附加当前task的{​​{1}}。

task_id

然后在您的<td id={`remove-task-${props.task.task_id}`} // notice this className="confirm-remove-task" > ... 上，确保获取正确的toggle_delete_task元素。

confirm_remove_task

---

或者更清洁的方法是为const toggle_delete_task = (task_id) => { console.log(task_id); const confirm_remove_task = document.getElementById( `remove-task-${props.task.task_id}` ); ... }; 元素的id创建一个变量，并在通过id分配和选择元素时引用该变量。

remove-task