當我按下那個元素時，我想記錄它的屬性（值）。我想，我沒有正確使用 useRef 鉤子。
鏈接：https : //codesandbox.io/s/access-dom-element-forked-lphg6?from-embed=&file=/src/ App.js: 0-405
import "./styles.css";
import { useRef } from "react";
export default function AccessingElement() {
const elementRef = useRef();
const fake_data = ["hello", "bye", "yes", "no"];
return (
<div>
{fake_data.map((item, idx) => (
<div value={item} ref={elementRef} key={idx} onClick={() => console.log(elementRef.current)}>
{item}
</div>
))}
</div>
);
}
uj5u.com熱心網友回復：
這個問題正在被發現，因為所有專案都被分配給相同的ref. 因此，在單擊任何元素時，no將記錄與最后分配的專案（即）相對應的文本。
在這種情況下，需要維護一個 refs 陣列，以便陣列中的每個 ref 對應一個 item。像這樣的東西：
import "./styles.css";
import { useRef } from "react";
export default function AccessingElement() {
const elementRef = useRef([]);
const fake_data = ["hello", "bye", "yes", "no"];
return (
<div>
{fake_data.map((item, idx) => (
<div
ref={el => elementRef.current[idx] = el}
key={idx}
onClick={() => console.log(elementRef.current[idx])}>
{item}
</div>
))}
</div>
);
}
這是有效的 CodeSandbox鏈接
uj5u.com熱心網友回復：
您不能為div. 如果你想為 設定一些資料div，你可以這樣做。
<div data-val={item} ref={elementRef} key={idx}
onClick={() => console.log(elementRef.current.dataset.val)}>
{item}
</div>
如果你想獲取 div 里面的文字，你只需要使用 textContent
elementRef.current.textContent
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/405716.html
標籤：