检索 React.js 元素的 ID

Question

我已经设置了一个静态 id 来响应元素，并且将onClick侦听器设置为组件，我将事件对象作为参数传递给侦听器函数并且event.target.id是空的string，如何获取被点击元素的 id？如果我没有调用event.persist()，我的所有值都为空，为什么会这样？sendDisplayType = (event) => {  event.persist();  console.log(event);}<div id="mission" onClick={this.sendDisplayType} className="col l8 m6 left-align nopaddingleft white-space greentext">    <h5> <b>Our Mission</b></h5></div>

Answer 1

如果我没有调用 event.persist()，我得到的所有值都是 null，为什么会这样？

调用事件回调后，所有属性都将被取消。这是出于性能原因。事件池参考

为了得到一个 id，我通常做的就是做一个经典的document.getElementById('id').

但是如果你真的想在不调用事件道具上的函数的情况下使用事件方式，你可以做的是将 id 传递为 data

所以：

<div id="mission" data-id="mission" onClick={this.sendDisplayType} className="col l8 m6 left-align nopaddingleft white-space greentext">

    <h5> <b>Our Mission</b></h5>

</div>

然后得到它：

sendDisplayType = (event) => {

  event.persist();

  console.log(event.target.getAttribute('data-id'));

}

我强烈推荐上面的代码比较添加箭头函数，例如：

  <div id="mission" onClick={() => this.sendDisplayType('mission')} />

我通常不使用上面的代码（在 prop 上调用函数）因为优化（所以如果你有性能问题，尽可能优化）

Answer 2

生成的事件不是dom event，它是react event，您应该ref在div标签上设置以访问其值，包括 id。