未觸發ReactFormonSubmit方法

這是一個登錄表單代碼。問題是當按下提交按鈕時，提交處理程式沒有被觸發。它的合理原因是什么？

loginHandler 函式從未被觸發，但 handleInputChange 函式似乎作業正常。

我嘗試在在線編輯器中復制粘貼相同的代碼，似乎可以很好地觸發功能？我找不到任何語法錯誤，但是否有其他任何東西阻止它被觸發？

import apiClient, { spaAuth, loginEndPoint } from "../../util/api";
import { responseManager } from "../../util/auth";
import Link from "next/link";
import { useEffect, useState } from "react";

const LoginForm = () => {
  const loginCred = {
    user_name: "",
    password: "",
    remember: false,
  };
  const [formData, setFormData] = useState(loginCred);
  const [remember, setRemember] = useState(false);

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.currentTarget.name]: e.currentTarget.value,
    });
  };

  const rememberHandler = (e) => {
    e.currentTarget.value = e.currentTarget.checked;
  };

  /**
   *
   * @param {*} e
   * Form Submission Handler
   */
  const loginHandler = (e) => {
    e.preventDefault();
    console.log("Here");

    apiClient
      .get(spaAuth)
      .then((response) => {
        console.log(response);
        console.log(formData);

        apiClient
          .post(loginEndPoint, formData)
          .then((response) => {
            console.log(response);

            responseManager("login", response, formData);
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <form
      className="flex flex-col justify-center w-full items-center mt-8 flex-wrap"
      id="LoginForm"
      onSubmit={loginHandler}
    >
      <div className="w-full flex flex-col justify-center items-center mb-10">
        <input
          className="input h-10 pl-5"
          id="username"
          type="text"
          name="user_name"
          placeholder="Username"
          onChange={handleInputChange}
          required={true}
        />

        <input
          className="input h-10 pl-5"
          id="password"
          type="password"
          name="password"
          placeholder="Password"
          onChange={handleInputChange}
          required={true}
        />

        <div className="w-5/6 flex items-center justify-between">
          <div>
            <label className="flex items-center text-gray-400 font-bold">
              <input
                className="leading-tight"
                type="checkbox"
                value={remember}
                id="remember"
                onChange={handleInputChange}
                onClick={rememberHandler}
                name="remember"
              />
              <span className="text-sm pl-2">Remember Me</span>
            </label>
          </div>
          <div>
            <Link href="/">
              <a className="font-bold text-sm text-gray-400 transition-colors duration-500 hover:text-blue-300">
                Forgot Password
              </a>
            </Link>
          </div>
        </div>
      </div>

      <input
        type="submit"
        className="btn bg-btn-color w-56 h-14 shadow-btn text-2xl mb-5 font-title font-bold"
        value="Login"
      />
    </form>
  );
};

export default LoginForm;

uj5u.com熱心網友回復：

我已經解決了這個問題，在這種情況下 -

<input
    type="submit"
    className="btn bg-btn-color w-56 h-14 shadow-btn text-2xl mb-5 font-title font-bold"
    value="Login"
    onClick={(e) => {
        e.stopPropagation();
    }}
/>

添加 onClick 方法并阻止其傳播啟用了 onSubmit 方法觸發。

可以使用 Button 而不是輸入元素來完成相同的操作。

uj5u.com熱心網友回復：

這是因為表單沒有設定動作屬性。

<form onSubmit={this.handleSubmit} action="#">
    <input placeholder="githug login" ref="login" />
    <button>Add Login</button>
</form>

如果上述解決方案也不起作用=>添加帶有 type="submit" 的按鈕可能會有所幫助

<button type="submit">Submit</button>

標籤：javascript 反应 形式 下一个.js

上一篇：在網站上提交表單時出現404NotFound錯誤

下一篇：自動完成在UNITY的新VisualStudio2022中不起作用