如何在NextJS中区分表单的多个提交按钮？

你只需要给两个提交按钮添加value属性，并统一它们的name（也可保留原name，但统一更简洁），然后在handleSubmit中通过FormData获取触发提交的按钮标识，就能区分登录和注册操作。

修改后的完整代码 #

import React from "react";

const LoginPage = () => {
  async function handleSubmit(data: FormData) {
    "use server";
    // 获取触发提交的操作类型
    const action = data.get('action');
    const username = data.get('username') as string;
    const password = data.get('password') as string;

    if (action === 'login') {
      // 执行登录逻辑
      console.log('执行登录:', { username, password });
      // 示例：调用登录API
      // await loginAPI(username, password);
    } else if (action === 'register') {
      // 执行注册逻辑
      console.log('执行注册:', { username, password });
      // 示例：调用注册API
      // await registerAPI(username, password);
    }
  }

  return (
    <form className="relative w-full" action={handleSubmit}>
      <div className="flex flex-col gap-3 relative w-full items-center">
        <input
          type="text"
          className="relative border-2 w-5/6 p-2 rounded-md indent-2 font-bold border-slate-400"
          placeholder="Username"
          name="username"
          required
        />
        <input
          type="password" // 密码建议用password类型，避免明文显示
          className="relative border-2 w-5/6 p-2 rounded-md indent-2 font-bold border-slate-400"
          placeholder="Password"
          name="password"
          required
        />
      </div>
      <div className="flex flex-col gap-4 mt-5 items-center">
        <button
          type="submit"
          className="py-3 px-6 rounded-2xl font-bold bg-slate-100 hover:bg-slate-400 outline outline-2 hover:text-white hover:outline-black"
          name="action"
          value="login"
        >
          Login
        </button>
        <button
          type="submit"
          className="py-3 px-6 rounded-2xl font-bold bg-slate-100 hover:bg-slate-400 outline outline-2 hover:text-white hover:outline-black"
          name="action"
          value="register"
        >
          Register
        </button>
      </div>
    </form>
  );
};

export default LoginPage;

关键说明 #

1. 按钮标识设置：给两个提交按钮设置相同的name="action"，分别赋予value="login"和value="register"。当点击某个按钮提交表单时，该按钮的name和value会自动被加入到FormData中。
2. 服务端逻辑分支：在handleSubmit里通过data.get('action')获取操作类型，根据返回值分别执行登录或注册逻辑。
3. 额外优化：把密码输入框的type改成password避免明文显示，同时添加required属性确保用户填写必要字段。

内容的提问来源于stack exchange，提问作者EmircanDuman