div元素內的消失錯誤訊息

我正在創建一個登錄頁面以做出反應，用戶輸入用戶名和密碼，頁面在我的快速后端檢查它，如果用戶名不存在，它會以 div 元素的形式給出錯誤，并帶有類似此 密碼的錯誤訊息錯誤

或者像這個太 不完整的表單錯誤 她是它背后的代碼

import React from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./Login.css";
import Intro from "../../Components/Intro/Intro";
import axios from "axios";

const Login = () => {
  // to handle proceeding forward
  const navigate = useNavigate();

  //handle submit action
  const handleSubmit = (event) => {
    event.preventDefault();

    //get data form the inputs
    var [adm, pass] = document.forms[0];

    //validate admission
    if (adm.value) {
      //validate password
      if (pass.value) {
        const cred = {
          identifier: "HSM/001/2021",
          password: pass.value,
        };
        axios
          .post("http://localhost:8000/api/credentials", cred)
          .then((res) => {
            if (res.data.logged) {
              navigate(`/home/${"sdds"}`);
            } else {
              setError({ name: "password", message: "Incorrect Password" });
            }
            
          })
          .catch((error) => console.log(error));
      } else {
        setError({ name: "password", message: "Please insert Password" });
      }
    } else {
      setError({
        name: "admission",
        message: "Please insert admission number",
      });
    }
  };

  //handle errors
  const [error, setError] = useState({ name: "", message: "" });

  //outputting Errors
  const outputError = (name) =>
    name === error.name && <div className="error">{error.message}</div>;
  return (
    <div className="Login">
      <Intro />
      <div className="card grid">
        <div className="institutionDetails">
          <span>
            <h1>Rongo University</h1>
          </span>
          <span>geliana</span>
        </div>
        <div className="formInput">
          <form onSubmit={handleSubmit}>
            <span>
              <h1>Log in</h1>
            </span>
            <div className="inputContainer">
              <label>Admission Number:</label>
              <input type="text" className="input text" />
              {outputError("admission")}
            </div>
            <div className="inputContainer">
              <label>Password:</label>
              <input type="password" name="" id="" className="input text" />
              {outputError("password")}
            </div>
            <div className="submitContainer">
              <input type="submit" value="Log in" className="button" />
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Login;

那么我如何使錯誤自動消失或當用戶開始輸入時輸入

uj5u.com熱心網友回復：

一如既往有很多選擇；） 2 我可以考慮查看您的代碼。

1. 使用 CSS 影片。參考這個答案
2. 在欄位上使用onChange或onInput偵聽器并將狀態設定為 undefined/empty/nullinputerror

uj5u.com熱心網友回復：

如果你想讓你的輸入不受控制（不傳遞值和 onChange），你至少有兩種方法來實作你想要的

// 1. Reset error state after focusing input
<input type="text" onFocus={() => setError({ name: "", message: "" })} />

// 2. Reset error state automatically after 5 second for example
let timeout = null;

const Login = () => {
   // ...
   useEffect(() => {
     return () => {
       if (timeout) {
         clearTimeout(timeout);
       }
     };
   }, []);

   const handleSubmit = (event) => {
     // ......
     setError({ name: "password", message: "Please insert Password" });
     timeout = setTimeout(() => setError({ name: "", message: "" }), 5000);
   };
    

標籤：javascript 反应

上一篇：如何呼叫json的所有鍵？

下一篇：獲取StartsWith價值