如何在 ReactJs 中的 map 函数中使用 OnClick 获取 DOM 元素 ID

Question

我正在尝试获取 DOM 元素 id 来更改<td>的背景。 I'm printing a calendar with a map function from an array called from an outer function and adding an onclick function to each loop. 但是，当我单击<td>时，我会从该行获得最后一个 id。 在警报 function 中，我从行中获取了最后一天的值

有什么建议么？

日历示例这是我的代码：

cols = new Array(7).fill(0).map((zero, arrayCounter) => {
  if ((i === 0 && arrayCounter < weekDay) || numberDays < counterDay + 1) {
    return (
      <td id={arrayCounter} key={arrayCounter}>
        &nbsp;
      </td>
    );
  } else {
    return (
      counterDay++,
      (
        <td
          id={this.state.month + counterDay}
          key={this.state.month + counterDay}
          onClick={() => this.handleDays(actualRow, counterDay)}
        >
          {counterDay}
        </td>
      )
    );
  }
});

// When press a day
handleDays = (actualRow, counterDay) => {
  alert(actualRow + "-" + counterDay);
};

Answer 1

我认为您的问题是， actualRow和counterDay变量并没有为每一行保存，它们指向循环变量，并且在循环结束时它们将始终等于上一个循环的值。

您可以做的是保存关闭中每一行的值。

例如，您可以将您的handleDays function 重写为类似

handleDays = (actualRow, counterDay) => () => {
  alert(actualRow + "-" + counterDay);
};

并在<td />中称我们为

<td
  id={this.state.month + counterDay}
  key={this.state.month + counterDay}
  onClick={this.handleDays(actualRow, counterDay)}
>
    {counterDay}
</td>

因此，此构造将在每个循环中调用带有handleDays和counterDay变量的actualRow并返回新的 function 并将变量保存在闭包中。

您可以在此处详细了解关闭器的工作原理https://javascript.info/closure