Question

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

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

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

Answer 2

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

由于您正在使用onSubmit事件，因此您需要从NextJS中删除Link组件并将其替换为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;

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

2 个答案: