Question

我无法从点击处理程序传递事件中获取一致的数据。我正在使用以下代码在表中加载行，并且在单击按钮时需要当前行的ID，以便我知道要删除的记录。

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的值可以是一个空字符串或正确的值。有人知道我在这里不了解什么吗，请您提出建议。

Answer 1

我将推测您的button元素实际上并不仅仅包含X；相反，其中包含一些元素，例如：

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

如果是这样，原因是e上的target property指的是被单击的元素，而不是您钩住事件的元素，并且如果您单击单词“此处”，则是i元素，而不是button元素。

改为使用currentTarget。那是您挂起事件的元素：

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

React代码中的dom事件对象值不一致，尽管我认为问题不在于React

1 个答案: