React 中表单不提交通常是因为提交按钮缺少 type="submit" 属性，导致点击无法触发 onSubmit 事件；正确设置按钮类型或按 Enter 键均可解决。

react 中表单不提交通常是因为提交按钮缺少 `type="submit"` 属性，导致点击无法触发 `onsubmit` 事件；正确设置按钮类型或按 enter 键均可解决。

在 React 应用中，<form> 元素的 onSubmit 事件仅在表单被“正式提交”时触发，而并非任意按钮点击都会触发该事件。你当前代码中的 <Button>Add</Button> 默认渲染为 <button>（无 type 属性），其默认行为是 type="button" —— 这意味着它不会触发表单提交，因此 onSubmit 回调永远不会执行。

✅ 正确做法是显式指定按钮类型为 submit：

<Button type="submit">Add</Button>

如果你使用的是自定义 Button 组件，请确保它将 type="submit" 正确透传至底层原生 <button> 元素，例如：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

// Button.tsx（示例）
const Button = ({ type = "button", children, ...props }) => (
  <button type={type} {...props}>
    {children}
  </button>
);

⚠️ 注意事项：

• 即使表单内只有一个输入框，仅靠点击普通按钮无法提交；必须通过 type="submit" 按钮 或 在任一文本输入框中按下 Enter 键（浏览器原生行为）来触发 onSubmit。
• 确保 handleSubmit 函数已正确定义并阻止了页面默认刷新（尤其在开发调试阶段）：

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault(); // 阻止页面重载，才能看到 console.log 效果
  console.log('Form submitted:', { name, image });
};

? 小技巧：为提升可访问性与用户体验，建议始终为表单提交按钮设置 type="submit"，并确保至少一个 <input> 支持 Enter 提交（如 type="text"、type="search" 等）。这样既兼容鼠标操作，也支持键盘用户高效交互。