Question

My code is like this:

<a eventkey={0} onClick={ (event) => console.log(event.target)} href="#">
    {i}
</a>

In console.log I want to see the eventkey value like 0. But I'm getting the whole tag.

How should I get only the eventkey value?

Answer 1

您需要使用它来访问您的自定义道具。

event.target.attributes.getNamedItem("eventkey").value

Answer 2

使用内联事件侦听器（onClick）被广泛认为是不好的做法，这就是为什么我重写代码以使用adddEventListener的原因。另请注意，eventkey标签上的a是非法的属性名称。请改用data-eventkey，它使您可以使用element.dataset.eventkey进行阅读：

const eventkeyLinks = Array.from(document.querySelectorAll('[data-eventkey]'));

eventkeyLinks.forEach((link) => 
  link.addEventListener('click', (event) => { 
    console.log(link.dataset.eventkey);
  })
);

<a data-eventkey="{0}" href="#"> {i} </a>
<a data-eventkey="{1}" href="#"> {j} </a>
<a data-eventkey="{2}" href="#"> {k} </a>
<a data-eventkey="{3}" href="#"> {l} </a>
<a data-eventkey="{4}" href="#"> {m} </a>

您还可以使用委托侦听器，该侦听器也可用于动态添加的元素：

document.addEventListener('click', (event) => { 
  if (event.target.matches('[data-eventkey]')) {
    console.log(event.target.dataset.eventkey);
  }
})

<a data-eventkey="{0}" href="#"> {i} </a>
<a data-eventkey="{1}" href="#"> {j} </a>
<a data-eventkey="{2}" href="#"> {k} </a>
<a data-eventkey="{3}" href="#"> {l} </a>
<a data-eventkey="{4}" href="#"> {m} </a>
<a href="#"> no eventkey here </a>

Answer 3

尝试

<a eventkey={0} onClick={ (event) => console.log(event.target.value)} href="#"> {i} </a>

如何访问我们通过<a> tag when we click on it?

3 个答案: