如何在React JS中访问按钮单击事件中的数据属性?

Question

如何从按钮的onClick事件处理程序访问与按钮关联的数据属性?请参阅下面的代码片段。

function ComponentWithAttribute () {

function OnClicked() {
alert("Value of data-val here"); 
}
return (
<button
onClick={OnClicked}
data-value={'foo'}
>
Click Me!
</button>
)
}
export default ComponentWithAttribute;

Answer 1

使用传递给任何事件处理程序的event参数:

function OnClicked(event) {
alert("Value of data-val here " + event.target.getAttribute("data-value"));   
};

Answer 2

修改你的函数以接受事件和使用数据集访问

function onClicked(e) {
console.log(e.target.dataset)
}

Answer 3

你不应该在按钮标签中使用data属性，而是直接将该值传递给函数参数，如果你需要它，它可以是一个动态值

function ComponentWithAttribute () {

function OnClicked(data) {
console.log("Value of data-val here", data); 
}
return (
<button onClick={() => OnClicked('foo')}>
Click Me!
</button>
)
}
export default ComponentWithAttribute;