我正在嘗試制作某種浮動輸入元素，使其跟隨滾動。最后我做到了，下面有代碼。
我想知道的是，如果我將 "setText(window.scrollY)" 更改為 "document.querySelector(".code).style.top = window.scrollY" 它不會給我相同的結果。我認為是相同的代碼，但后來的代碼不起作用。誰能告訴我為什么？謝謝
import React, { useState } from "react";
function Input() {
const [scroll, setScroll] = useState(0);
window.addEventListener(
"scroll",
function () {
if (typeof document.querySelector(".code") === "undefined") {
alert("TT");
} else {
setScroll(window.scrollY); // *this part
}
},
{ passive: true }
);
return (
<input
style={{
top: text
}}
className="code"
autoComplete="on"
placeholder="Write code please"
/>
);
}
export default Input;
uj5u.com熱心網友回復：
setScroll(window.scrollY "px");
uj5u.com熱心網友回復：
使用useRef() 鉤子代替document.querySelector(".code"). React 與虛擬 DOM 一起作業，因此在document.querySelector(".code")運行時，rea DOM 尚不可用。但是您可以使用useRef來獲取虛擬 DOM 并對其進行操作。您可以使用 ref 的.current屬性訪問該元素。
其次，滾動事件處理程式需要包含在 React 的useEffect鉤子中，以確保在組件掛載時添加它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351439.html
標籤：javascript css 反应