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

【问题标题】：Netlify form doesn't work with a Material-UI modalNetlify 表单不适用于 Material-UI 模式
【发布时间】：2022-12-23 15:20:39
【问题描述】：

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

代码

这是索引文件：

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应用程序。

问题

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

尝试过的解决方案

我已经尝试了表单标签中的每个标签。
我已经尝试使用 Next build & Next export 和默认的 Next config deploy。
我尝试过使用 Material UI 组件或 HTML 本机元素

有人有想法吗？

【问题讨论】：

标签： javascript reactjs forms material-ui netlify

【解决方案1】：

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

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

因此，您可以使用表单在 Next 项目上创建另一个页面，如 /subscribe。因此表单将在构建时呈现，Netlify 将能够检测到您的表单。

【讨论】：

【解决方案2】：

我不确定自接受答案以来 Netlify 是否更改了它们的实现，但现在是错误的。通过简单地关注their walkthrough，我已经在我的模式中成功地实现了 Netlify 表单。

在站点文件夹中的任何 HTML 文件中，添加具有 netlify 属性的 HTML 表单和您希望 Netlify 处理的输入字段。

在 JSX 表单中，包含一个 <input type="hidden" name="form-name" value="the-name-of-the-html-form" />。

例子：

索引.html

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" hidden>
  <input type="hidden" name="form-name" value="contact" />
  <input type="email" name="email" />
  <input type="text" name="name" />
  <textarea name="message"></textarea>
</form>

SampleModal.js

<form name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact" />
    <TextField
    id="email"
    name="email"
    margin="dense"
    label="Your Email" />
    <TextField
    id="name"
    name="name"
    margin="dense"
    label="Name" />
    <TextField
    id="message"
    name="message"
    margin="dense"
    label="What do you need?"
    multiline />
    <Button
    variant="contained" 
    color="success"
    type="submit">
        Send Email
    </Button>
</form>

【讨论】：