ReactJs 总是打印相同的 id

Question

我正在尝试创建一个包含一些数据的 table，但我在打印正确的 ID 时遇到了问题。

首先，我使用 table 和所有相关元素创建了父组件。

在 <tbody> 内部，我正在运行设置一个 map() 函数，它循环遍历整个 array 和 return 每个 object一个<TaskRow />组件。

对象数组

let maintenance_task = [
    {
        task_id: 1,
        task: 'task 1',
        description: '',
        date: '2020-02-02'
    },
    {
        task_id: 2,
        task: 'task 2',
        description: '',
        date: '2020-02-02'
    },
    {
        task_id: 3,
        task: 'task 3',
        description: '',
        date: '2020-02-02'
    },
    {
        task_id: 4,
        task: 'task 4',
        description: '',
        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;

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

问题是，当我点击取消按钮和运行相同的功能toggle_delete_task()时，它总是会在控制台打印1，这是第一个task_id 的 objects 里面 array.

Answer 1

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

你必须给他们每个人一个不同的 ids，可能附加当前 task 的 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}`
  );
  
  ...
  };

或者更简洁的方法是为 remove-task 元素的 id 创建一个变量，并在按 id 分配和 selecting 元素时引用它。

function TaskRow(props) {
  const removeTaskElementId = `remove-task-${props.task.task_id}`;
...

ReactJs 总是打印相同的 id

ReactJs always print the same id

reactjs

react-props