为什么我不能在 next.js 页面中触发表单提交事件？

Question

我在页面/登录中有一个非常简单的登录表单。但是，当我尝试提交它时，提交事件似乎永远不会被调用，并且默认事件也不会被阻止。

const login = () => {
  return (
    <Fragment>
      <form
        onSubmit={async e => {
          // never called
          debugger;
          e.preventDefault();
        }}
      >
        <div>
          <label>Email:</label>
          <input type="text" name="email" />
        </div>
        <div>
          <label>Password:</label>
          <input type="password" name="password" />
        </div>
        <div>
          <input type="submit" value="Log In" />
        </div>
      </form>
      <div>
        Don't have an account?
        <Link href="/signup">
          <a>Sign up here</a>
        </Link>
      </div>
    </Fragment>
  );
};

export default login;

我希望调试器被命中，默认事件被阻止，但都没有发生。我在 React 中做过很多次类似的事情，但是我对 next.js 比较陌生，所以我认为这一定是由于 next 的一些我不理解的行为。任何帮助表示赞赏！

编辑* 好的，我找到了导致错误的原因。在服务器上，我使用的是 jwt auth，所以我有这个代码来防止未经身份验证的用户查看任何页面。

../server/app.js（主服务器模块）

server.use(
      jwt({
        secret: process.env.JWT_SECRET
      }).unless({ path: ["/login", "/signup", "/graphql"] })
    );

    server.use((err, req, res, next) => {
      if (err.name === "UnauthorizedError") {
        return res.redirect("/login");
      }
      next();
    });

当我注释掉该代码块时，客户端上的表单将正常处理。不知道为什么会产生影响，但无论如何，我需要那个代码，所以我很想知道它为什么会导致问题！

Answer 1

这是因为您在表单上添加了侦听器onSubmit，但那里没有提交事件。 它与你的html组件有关，而不是使用next/link和tag a，你应该使用提交按钮来触发onSubmit事件。

由于您使用的是 onSubmit 事件，您需要删除 Link 组件并将其替换为 NextJS 中的 Router 组件，该组件将在您的 onSubmit 函数中调用。

import Router from "next/router";

const login = () => {
  return (
    <Fragment>
      <form
        onSubmit={async e => {
          // never called
          debugger;
          e.preventDefault();
          Router.push("/signup");
        }}
      >
        <div>
          <label>Email:</label>
          <input type="text" name="email" />
        </div>
        <div>
          <label>Password:</label>
          <input type="password" name="password" />
        </div>
        <div>
          <input type="submit" value="Log In" />
        </div>
      </form>
      <div>
        Don't have an account?
        <button type="submit">Sign up here</button>
      </div>
    </Fragment>
  );
};

export default login;

Answer 2

React 不支持在没有额外步骤的情况下异步使用事件。看起来你不需要这个，所以只需将 onSubmit={async e => { 更改为 onSubmit={e => {。