javascript - React Form onSubmit 方法未触发

Question

这是登录表单代码。问题是当按下“提交”按钮时，提交处理程序不会被触发。造成这种情况的合理原因是什么？

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;

Answer 1

我已经解决了这个问题，在这种情况下-

<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 方法触发。

使用按钮而不是输入元素可以完成同样的事情。