关于data-*的React使用和调用及常遇到的问题

最新推荐文章于 2024-09-08 09:22:40 发布

犹如幻翳！

最新推荐文章于 2024-09-08 09:22:40 发布

阅读量1.4k

点赞数 1

分类专栏： javascript react 文章标签： react

本文链接：https://blog.csdn.net/zw686668/article/details/118682827

版权

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

react

1 篇文章

订阅专栏

关于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)//1
       console.log(getSecondElement.dataset.singleId)//2
       console.log(getThirdElement.dataset.thirdId)//undefined
</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)//<span>点击文本为蓝色</span>
        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