javascript - 如何使用 ReactJs 中的 map 函数内的 OnClick 获取 DOM 元素 id

Question

我正在尝试获取 DOM 元素 id 来更改 <td> 的背景。我正在使用从外部函数调用的数组中的 map 函数打印日历，并向每个循环添加 onclick 函数。但是当我点击 <td>我从该行获取最后一个 id。在警报函数中，我从行中获取最后一天的值

有什么建议吗？

Calendar Example这是我的代码:

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函数类似于

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与 actualRow和counterDay每个循环上的变量并返回新函数，并将变量保存在闭包中。

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