如何解决React Hooks:如何访问自定义属性值?
这是代码
<div ref={cardNameRef} value="card-1" card-status="yes">Card 1</div>
<button onClick ={setData} className="btn btn-info">Select</button>
我想访问 card-status value
。
这是我尝试过的
......
const cardNameRef = useRef();
....
const setData = () => {
let status = cardNameRef.current.getAttribute('cardStatus');
console.log('status',status);
}
不幸的是,我得到以下status null
这里出了什么问题?
解决方法
您可以通过以下代码获取自定义属性。
function CustomAttr() {
const cardNameRef = useRef();
const setData = () => {
let status = cardNameRef.current.getAttribute("card-status");
console.log("status",status);
};
return (
<div>
<div ref={cardNameRef} value="card-1" card-status="yes">
Card 1
</div>
<button onClick={setData} className="btn btn-info">
Select
</button>
</div>
);
}
,
作为一般规则,您需要按原样使用属性或道具名称。如果您称其为 card-status
,请使用 card-status。如果您将其称为 cardStatus
,则使用 cardStatus。
所以这应该有效:
let status = cardNameRef.current.getAttribute('card-status');
就您而言,card-status
无论如何都不是标准的 div 属性。我建议将其更改为 data-status
或 data-cardStatus
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。