关于data-*的React使用和调用及常遇到的问题
Js常规使用
关于一级命名，二级命名及写法
- data属性命名拼写为小写，不必使用驼峰命名，二级命名属性名自动解析为驼峰命名，如singleId,
但是属名命名为驼峰，取值为undefined(dataset解析为thirdid,所以取不到)
<body>
<div data-id='1' id="test1"></div>
<div data-single-id='2' id="test2"></div>
<div data-thirdId='3' id="test3"></div>
</body>
<script>
var getFirstElement= document.getElementById('test1')
var getSecondElement= document.getElementById('test2')
var getThirdElement= document.getElementById('test3')
console.log(getFirstElement.dataset.id)
console.log(getSecondElement.dataset.singleId)
console.log(getThirdElement.dataset.thirdId)
</script>
React取值为undefined
- 由于React是合成事件，当把data-*加在组件上通过e.target获取其实在dataset层获取不到数据，如代码所示；
- 因为e.target获取的只是纯文本,而Button添加的data是在更外层。所以需通过e.target.parentNode获取到外层元素，（即button），再通过dataset去获取data-*里面的数据。
- 如果取到undefined,先去外层查看是否包含该数据，再去做判断。
const TestDataPro = () => {
const [color, setColor] = useState('#000')
const reviewDataSet = (e) => {
console.log(e.target)
setColor(!!e?.target?.parentNode?.dataset?.testId?'blue':'red')
}
return (
<div>
<Space>
<Button
type='primary'
onClick={reviewDataSet}
data-test-id='1'
>
点击文本为蓝色
</Button>
<Button
type='primary'
onClick={reviewDataSet}
>
点击文本为红色
</Button>
</Space>
<div
style={{color}}
>
我是切换颜色的语句
</div>
</div>
)
}
export default TestDataPro
|