在我的 NEXT.JS 專案中，我想要一個簡單的<p>元素在我的按鈕下方顯示 x 時間，然后我希望它消失。我不想使用 alert() 功能。我該如何管理？
uj5u.com熱心網友回復：
你可以通過一個簡單的 js 事件觸發器來實作。您需要做的就是為按鈕創建一個單擊事件偵聽器，然后將您的“p”元素附加到所需的視圖。
順便說一句，這與 next.js 無關，這是核心 js DOM 操作。您應該了解 DOM 以及如何使用它，然后探索類似下一個的框架。只有對核心js和DOM操作有很好的了解，你才能真正學習框架。
uj5u.com熱心網友回復：
如果有人需要它，這里是使用 useState 和簡單處理程式的解決方案......
const [myAlert, setMyAlert] = useState(false)
const handleMyAlert = () => {
setMyAlert(true);
setTimeout(() => {
setMyAlert(false)
}, 5000);
}
你可以像這樣使用它： <button onClick={handleMyAlert}>Click me</button>
和<p>設定style={myAlert ? {display: "block"} : {display: "none}}
uj5u.com熱心網友回復：
我為時已晚，但無論如何我都會發布它以嘗試片段方法。
function setMsg(e){
let inter = alertMsg(e);
}
function alertMsg(e){
document.getElementById("alertP").innerHTML="Click-me!";
document.getElementById("alertP").style.display="inline";
inter= setInterval("hideOutput()",3000);
}
function hideOutput(){
document.getElementById("alertP").style.display="none";
clearInterval(inter);
}html, body{
font-family:"sans-serif";
font-size:1em;
}
button{
font-size:1.2em;
}
#buttonContainer{
width:200px;
margin:auto;
}
#alertP{
display:none;
text-align: center;
border:1px solid #000000;
background-color:red;
color:#FFFFFF;
}<div id="buttonContainer">
<button id="clickableArea" onMouseOver="setMsg()">Alert Button</button>
<p id="alertP"></p>
</div>uj5u.com熱心網友回復：
function hide(){
const div = document.getElementById("alert")
div.parentNode.removeChild(div);
}#alert{
background-color:lightgreen;
width:200px;
height:100px;
}<html>
<body>
<button onclick="hide()">Hide</button>
<div id="alert">
<h1>Alert</h1>
<p>Message</p>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525671.html