当我们点击它时,如何访问我们通过 <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
的原因。另请注意,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>