最終專案的影像
當我單擊其中一個橙色按鈕時，它應該將“p1”變數列印到控制臺，但該變數的值為 Null 我不知道為什么這個變數會給我這個錯誤，我想在 onClick 函式中使用它按鈕內。
從“./images/bg-pattern-desktop.svg”匯入 img_1；從“./images/illustration-woman-online-desktop.svg”匯入 img_2；從“./images/illustration-box-desktop.svg”匯入 img_3；
函式 App() { const p1 = document.querySelector("p1");
return ( <> <img src={img_3} alt="img_3" className="img_3" /> <div className="container"> <div className="imgBox"> <img src={img_1} alt="img_1" className="img_1" /> <img src={img_2} alt="img_2" className="img_2" /> </div> <div className="textBox"> <h1>FAQ</h1> <div className="questions"> <div> {/* the value of p1 is null */} {/* because it can't get document.querySelector(".p1") above */} <button onClick={() => { console.log(p1); }} > How many team members can I invite? </button> <p className="p1"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis. </p> </div> <hr /> <div> <button onClick={() => {}}> How many team members can I invite? </button> <p className="notactive p2"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis. </p> </div> <hr /> <div> <button onClick={() => {}}> How many team members can I invite? </button> <p className="notactive p3"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis. </p> </div> <hr /> <div> <button onClick={() => {}}> How many team members can I invite? </button> <p className="notactive p4"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis. </p> </div> <hr /> <div> <button onClick={() => {}}> How many team members can I invite? </button> <p className="notactive p5"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis. </p> </div> <hr /> </div> </div> </div> </> );}
匯出默認應用程式；
uj5u.com熱心網友回復：
這里沒有錯誤，我認為只是代表您的誤解。您的問題是嘗試document.querySelector在反應組件中使用。
簡單的答案：useRef如下使用。此外，請查看檔案以獲得更好的理解。
完整答案：當組件第一次渲染時，document.querySelector在您回傳具有類“p1”的元素之前運行。因此，它還沒有在頁面上重新呈現。document.querySelector將無法找到元素，而是回傳 null 。
function App() {
const p1 = React.useRef(null);
return (
<React.Fragment>
<img src="" alt="img_3" className="img_3" />
<div className="container">
<div className="imgBox">
<img src="" alt="img_1" className="img_1" />
<img src="" alt="img_2" className="img_2" />
</div>
<div className="textBox">
<h1>FAQ</h1>
<div className="questions">
<div>
{/* the value of p1 is null */}
{/* because it can't get document.querySelector(".p1") above */}
<button
onClick={() => {
console.log(p1);
}}
>
How many team members can I invite?
</button>
<p ref={p1} className="p1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button onClick={() => {}}>
How many team members can I invite?
</button>
<p className="notactive p2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button onClick={() => {}}>
How many team members can I invite?
</button>
<p className="notactive p3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button onClick={() => {}}>
How many team members can I invite?
</button>
<p className="notactive p4">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button onClick={() => {}}>
How many team members can I invite?
</button>
<p className="notactive p5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
</div>
</div>
</div>
</React.Fragment>
);
};
ReactDOM.render(
<App />,
document.getElementById("root")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js" integrity="sha512-bom/WJB/C/RVkBpU7ic7qopGc/CSWjj1aZhZLykucHKCZuT9h881Uh8VdvEioA6L0vQ/Tsaw1uK2Pnj312c17g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js" integrity="sha512-HBhuJNLkfYh0Z tgfKYCstQZzgQmMbAfK4FvzxHrUYqfI FRnXeBn1ZXu 1NSGWissxE2ipI eKaoRbRV2W4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="root"></div>uj5u.com熱心網友回復：
用querySelector字串定位一個類需要一個點：
function App() { const p1 = document.querySelector("p1");
// should be:
function App() { const p1 = document.querySelector(".p1");
如果您想在 React 組件中存盤變數，我建議您查看useState()而不是查詢選擇器：
import { useState } from "react";
function App() {
const [fillerText, setFillerText] = useState(
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis."
);
return (
// other stuffs
<div>
<button onClick={() => console.log(fillerText)}>
How many team members can I invite?
</button>
<p className="p1">{fillerText}</p>
</div>
// other stuffs
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/487851.html
標籤：javascript 反应 dom 无效的 点击