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

为什么直接访问customData会返回undefined？ #

• style、id属于DOM元素的标准内置属性，浏览器会自动把这类属性映射为DOM对象的同名属性，所以能直接通过ev.target.style、ev.target.id访问到对应值。
• 自定义data-*属性不属于标准内置属性，浏览器不会将其挂载为DOM对象的直接属性，因此直接访问ev.target.customData会返回undefined。

正确获取自定义data属性值的两种方法 #

1. 使用getAttribute方法
   直接通过属性名精准获取，不受命名格式影响：

console.log(ev.target.getAttribute('data-customData'))

2. 使用DOM的dataset对象
   这是HTML5专为自定义data属性设计的访问方式，需注意命名转换规则：

• HTML中data-前缀后的部分，大写字母会被浏览器转为小写；如果是连字符分隔的命名（比如data-custom-data），会自动转为驼峰式属性名（对应dataset.customData）。
  针对你代码里的data-customData，实际在DOM中会被处理为data-customdata，所以通过dataset访问的写法是：

console.log(ev.target.dataset.customdata)

如果想更规范，建议把自定义属性名改为连字符分隔格式（比如data-custom-data），这样对应的dataset属性就是符合驼峰习惯的customData：

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

内容的提问来源于stack exchange，提问作者Simao