Несовместимое значение объекта dom в коде React, хотя я не думаю, что проблема в React - PullRequest
Новая
       15

Несовместимое значение объекта dom в коде React, хотя я не думаю, что проблема в React

0 голосов
/ 01 октября 2018

У меня проблемы с получением непротиворечивых данных из события прохождения обработчика кликов.Я загружаю строки в таблицу, используя следующий код, и мне нужен идентификатор текущей строки при нажатии кнопки, чтобы я знал, какую запись удалить. 

let rows = [];
for (var i = 0; i < documents.length; i++){
  let id = documents[i].id;
  rows.push(<tr key={id}>
              <td>{documents[i].name}</td>
              <td><button id={id} onClick={this.toggledeleteConfirmModal}>X</button></td>
            </tr>);
}

Обработчик кликов выглядит следующим образом

toggledeleteConfirmModal = (e) => { let id = e.target.id; console.log(id); ... };

Значением id является либо пустая строка, либо правильное значение.Кто-нибудь знает, что я не понимаю здесь, и не могли бы вы предложить исправление.

1 Ответ

0 голосов
/ 01 октября 2018

Я собираюсь предположить, что ваш button элемент на самом деле не просто содержит X;вместо этого у вас есть некоторые элементы, такие как: 

<button id={id} onClick={this.toggledeleteConfirmModal}>Text <i>here</i></button>

Если так, то причина в том, что свойство target в e относится к элементу, по которому был выполнен щелчока не элемент, к которому вы подключили событие, и если вы нажмете слово «здесь» выше, это элемент i, а не элемент button.

Использование currentTarget вместо.Это элемент, к которому вы подключили событие: 

toggledeleteConfirmModal = (e) => { let id = e.currentTarget.id; console.log(id); ... };
// --------------------------------------------^
...