多页Web应用中能否在全局布局使用submit类型按钮组件？

我想把包含Button组件的Header作为全局视图复用，避免每个页面重复导入Button，但把Button放在RootLayout的Header中时，点击按钮控制台无输出；直接在todo/page.tsx里导入使用Button则正常。

核心问题原因 #

1. Button组件属性错误
   原Button组件中type={props.submit}写法错误，HTML按钮的type属性应接收"submit"、"button"等值，这里应该是接收props.type或者直接设置为"submit"，否则按钮无法成为有效的提交按钮。

2. 全局按钮不在表单范围内
   HTML规则中，只有表单内部的提交按钮才能触发表单的onSubmit事件。当Button在全局Header（属于RootLayout）时，它不在TodoPage的<form>标签内部，自然无法触发表单的提交逻辑。

3. TodoPage输入框绑定错误
   原代码中<input type="text" placeholder="Todo Title" value={todoHandler} />把onChange函数错绑到了value属性上，导致输入框无法正常更新状态，即使提交也拿不到正确的todo值。

修正方案 #

1. 修复Button组件

// components/button.tsx
export default function Button({ type = "submit", value }: { type?: string; value: string }) {
  return <input type={type} value={value} />;
}

2. 修复TodoPage输入框绑定

// app/todo/page.tsx
"use client"; // Next.js App Router中使用hooks必须添加此指令
import { useState } from "react";

export default function TodoPage() {
  const [todo, setTodo] = useState("");

  function saveTodo(e: React.FormEvent) {
    e.preventDefault(); // 阻止默认表单提交的页面刷新行为
    console.log(todo);
  }
 
  function todoHandler(e: React.ChangeEvent<HTMLInputElement>) {
    setTodo(e.target.value);
  }

  return (
    <form onSubmit={saveTodo}>
      <div>
        <input 
          type="text" 
          placeholder="Todo Title" 
          value={todo} 
          onChange={todoHandler} 
        />
      </div>
    </form>
  );
}

3. 实现全局Header按钮触发页面表单提交

要让全局Header里的Button能触发当前页面的表单提交，可以用React Context共享提交函数：

创建FormContext

// components/FormContext.tsx
"use client";
import { createContext, useContext, ReactNode } from "react";

type FormContextType = {
  handleSubmit?: (e: React.FormEvent) => void;
};

const FormContext = createContext<FormContextType>({});

export function FormProvider({ children, handleSubmit }: { children: ReactNode; handleSubmit?: (e: React.FormEvent) => void }) {
  return (
    <FormContext.Provider value={{ handleSubmit }}>
      {children}
    </FormContext.Provider>
  );
}

export function useFormContext() {
  return useContext(FormContext);
}

修改Header组件使用Context

// components/header.tsx
"use client";
import Button from "./button";
import { useFormContext } from "./FormContext";

export default function Header({ children }: { children: ReactNode }) {
  const { handleSubmit } = useFormContext();

  const handleButtonClick = (e: React.MouseEvent) => {
    e.preventDefault();
    handleSubmit?.(e as unknown as React.FormEvent);
  };

  return (
    <div>
      {children}
      <Button 
        value="保存待办" 
        type="button" // 设置为button类型，避免默认提交行为
        onClick={handleButtonClick} 
      />
    </div>
  );
}

修改RootLayout和TodoPage

// app/layout.tsx
import Header from "@/components/header";
import { FormProvider } from "@/components/FormContext";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <Header>
          {/* 头部其他内容 */}
        </Header>
        <FormProvider>
          {children}
        </FormProvider>
      </body>
    </html>
  );
}

// app/todo/page.tsx
"use client";
import { useState } from "react";
import { FormProvider } from "@/components/FormContext";

export default function TodoPage() {
  const [todo, setTodo] = useState("");

  function saveTodo(e: React.FormEvent) {
    e.preventDefault();
    console.log(todo);
  }
 
  function todoHandler(e: React.ChangeEvent<HTMLInputElement>) {
    setTodo(e.target.value);
  }

  return (
    <FormProvider handleSubmit={saveTodo}>
      <form>
        <div>
          <input 
            type="text" 
            placeholder="Todo Title" 
            value={todo} 
            onChange={todoHandler} 
          />
        </div>
      </form>
    </FormProvider>
  );
}

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