如何在JSX / React中获取数据自定义属性的值

Question

假设我在JSX元素中创建了一个数据自定义属性来保存关于该元素的一些元数据。

:

return (
<button data-customData="red" onClick={(ev) => { console.log(ev.target.customData)}}>Teste</button>
)

如果我尝试访问数据自定义属性，就像你在代码中看到的那样，我将得到undefined。

但是如果我尝试ev.target.style或ev.target.id，我将不会得到未定义。

有什么不同?如何访问这个值?

Answer 1

您没有调用正确的值，您正在调用一个名为customData的属性，但属性名称为data-customData，为了获得该值，您需要更改使用元素(eg .target)提供的getAttribute函数调用该属性的方式

return (
<button
data-customData="red"
onClick={(ev) => {
const element = ev.target;
console.log(element.getAttribute("data-customData"));
}}
>
Click Me
</button>
)

你想做的事情并不是一个非常常见的模式，如果你想从用户那里获得一个值，你应该使用正确的控件(input, radio, select)而不是使用data属性。