当我们点击它时,如何访问我们通过 <a> 标签发送的 console.log 中的道具?

How to access prop in console.log that we send through <a> tag when we click on it?

我的代码是这样的:

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

console.log 中,我希望看到 eventkey 值为 0。 但我得到了整个标签。

我应该如何只获取 eventkey 值?

尝试

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

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

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

人们普遍认为使用内联事件侦听器 (onClick) 是不好的做法,这就是我重写您的代码以使用 adddEventListener 的原因。另请注意,eventkeya 标签上的非法属性名称。请改用 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>