Как получить идентификатор элемента DOM с помощью OnClick внутри функции карты в ReactJs

Question

Я пытаюсь получить идентификатор элемента DOM, чтобы изменить фон <td>. Я печатаю календарь с функцией карты из массива, вызванного из внешней функции, и добавляю функцию onclick в каждый цикл. Но когда я нажимаю <td>, я получаю последний идентификатор из этой строки. В функции оповещения я получаю значение последнего дня из строки

Есть предложения?

Пример календаря Это мой код:

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