代码之家 › 专栏 › 技术社区 › adam tropp

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

next.js reactjs

adam tropp · 技术社区 · 5 年前

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

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();
    });

当我注释掉这段代码时,客户端上的表单将正常处理不知道为什么会有影响,但无论如何,我需要那个代码,所以我很想知道为什么它会导致一个问题!

1 回复 | 直到 5 年前

Darryl RN 5 年前

这是因为你添加了listener onSubmit 在您的表单上,但没有提交事件。它与您的html组件相关,您应该使用 提交按钮触发 提交 事件 .

由于您使用的是onSubmit事件,因此需要从NextJS中移除Link组件并将其替换为路由器组件,后者将在您的 提交 功能。

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;

Joseph Sible-Reinstate Monica 5 年前

React不支持在没有额外步骤的情况下异步使用事件看起来你不需要这个,所以换个衣服吧 onSubmit={async e => { 到 onSubmit={e => { .