![](/img/trans.png)
[英]Material-UI DataGrid Column Filter doesn't work with Material-UI Dialog
[英]Netlify form doesn't work with a Material-UI modal
我在 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 页面。
有人有想法吗?
这是因为您的模态未在构建时呈现。
Netlify 将分析您的 HTML 以找到data-netlify="true"
标签。 但是在构建时,没有标签,因为 JavaScript 会在用户单击按钮时而不是在构建时添加模式。
因此,您可以在 Next 项目上创建另一个页面,例如/subscribe
表单。 因此表单将在构建时呈现,Netlify 将能够检测到您的表单。
我不确定自接受答案以来 Netlify 是否更改了它们的实现,但现在是错误的。 通过简单地遵循他们的演练,我已经在我的模态中成功地实现了 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.