Netlify 表单不适用于 Material-UI 模式

我在 Netlify 上有一个简单的 Next.js 应用程序，它打开一个表单以单击订阅按钮。

Code

这是索引文件：

pages/index.js

import React from 'react';
import { SubscribeModal } from '../components/SubscribeModal';

export default function Home() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Sign in in newsletters</button>
      <SubscribeModal
        open={open}
        onClose={() => setOpen(false)}
        onSuccess={() => setOpenBadNews(true)}
      />
    </div>
  );
}

这是模态：

components/SubscribeModal.js

import { Dialog, DialogTitle } from '@mui/material';

export function SubscribeModal({ open, onClose, onSuccess }) {
  return (
    <Dialog onClose={onClose} open={open}>
      <DialogTitle>
        <b>Login</b>
      </DialogTitle>
      <form name="contact" action="/success" method="POST" data-netlify="true">
        <input type="hidden" name="form-name" value="contact" />
        <p>
          <label htmlFor="youremail">Your Email: </label>{' '}
          <input type="email" name="email" id="youremail" />
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>
    </Dialog>
  );
}

我也有一个简单的pages/success.js应用程序并显示成功消息。

Problem

当我点击提交按钮时，出现 404 页面。

尝试过解决方案

• 我已经尝试了表单标签中的每个标签。
• 我尝试过“下一步构建”和“下一步导出”以及默认的“下一步配置部署”。
• 我尝试过使用 Material UI 组件或 HTML 原生元素

有人有主意吗？

这是因为您的模态未在构建时呈现。

Netlify 将分析您的 HTML 以查找data-netlify="true"标签。 但在构建时，没有标签，因为 JavaScript 会在用户单击按钮时添加模式，而不是在构建时添加。

因此，您可以在下一个项目上创建另一个页面，例如/subscribe与表格。因此，表单将在构建时呈现，并且 Netlify 将能够检测到您的表单。