React Hooks：如何访问自定义属性值？

Question

我想使用反应挂钩访问自定义属性值

这是代码

<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

这里有什么问题？

Answer 1

作为一般规则，您需要按原样使用属性或道具名称。如果你称它为 card-status，请使用 card-status。如果您将其命名为 cardStatus，则使用 cardStatus。所以这应该有效：

let status = cardNameRef.current.getAttribute('card-status');

在您的情况下，card-status 无论如何都不是标准的 div 属性。我建议将其更改为 data-status 或 data-cardStatus.

Answer 2

您可以通过以下代码获取您的自定义属性。

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>
  );
}

React Hooks：如何访问自定义属性值？

React Hooks : How to access custom attribute value?

javascript

custom-attributes

reactjs

use-ref