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

您可以通過以下代碼獲取自定義屬性。

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

Answer 2

作為一般規則，您需要按原樣使用屬性或道具名稱。 如果您稱其為card-status ，請使用 card-status。 如果您將其cardStatus ，則使用 cardStatus。 所以這應該工作：

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

在您的情況下， card-status無論如何都不是標准的 div 屬性。 我建議將其更改為data-status或data-cardStatus 。