Reactjs &引用；成功的；Netlify表格提交不'；仪表板中不显示
我有一个部署到Netlify的create react应用程序，我正在使用它来呈现我的表单。我的表单已在Netlify仪表板中注册，当我提交时，会收到成功响应，但Netlify仪表板中不会显示任何提交 最初，我尝试使用指南创建表单。它已在Netlify仪表板中注册，但提交内容不会显示。（我确保在index.html文件中使用静态表单，在react表单中使用带有表单名称的隐藏输入字段。） 然后我尝试使用react netlify form包，但仍然存在同样的问题，即使提交返回成功状态 当我查看XHR请求时，我看到响应代码为200： 在index.html文件中，我有Netlify的静态表单：Reactjs &引用；成功的；Netlify表格提交不'；仪表板中不显示,reactjs,create-react-app,netlify,Reactjs,Create React App,Netlify,我有一个部署到Netlify的create react应用程序，我正在使用它来呈现我的表单。我的表单已在Netlify仪表板中注册，当我提交时，会收到成功响应，但Netlify仪表板中不会显示任何提交 最初，我尝试使用指南创建表单。它已在Netlify仪表板中注册，但提交内容不会显示。（我确保在index.html文件中使用静态表单，在react表单中使用带有表单名称的隐藏输入字段。） 然后我尝试使用react netlify form包，但仍然存在同样的问题，即使提交返回成功状态 当我查看XH
<!-- Netlify static HTML form -->
<form name="contactform" netlify netlify-honeypot="__bf" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
<!-- End Netlify static HTML form -->
<NetlifyForm name='contactform'>
{({ loading, error, success }) => (
<div>
{loading &&
<div>Loading...</div>
}
{!loading && !success &&
<div className="jo-contact-form">
<h2 className="jo-contact-form-title">
Contact
</h2>
<div>
<div className="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
<label htmlFor="name">Your Name</label>
<input className={nameClasses} type="text" name="name" placeholder="Enter your name" value={name} onChange={this.handleChange}/>
<span className="focus-input100"></span>
</div>
<div className="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
<label htmlFor="email">Email</label>
<input className={emailClasses} type="email" name="email" placeholder="Enter your email addess" value={email} onChange={this.handleChange}/>
<span className="focus-input100"></span>
</div>
</div>
<div className="wrap-input100 validate-input" data-validate = "Message is required">
<label htmlFor="message">Message</label>
<textarea className={messageClasses} name="message" placeholder="Your message here..." value={message} onChange={this.handleChange}></textarea>
<span className="focus-input100"></span>
</div>
<LinkButton text="Send" linkType="form" />
</div>
}
{error &&
<div className="jo-contact-form-submission-message jo-contact-form-error">
<div>
Your information was not sent. Please try again later.
</div>
</div>
}
{success &&
<div className="jo-contact-form-submission-message jo-contact-form-success">
<div>
Thanks for the message! Expect a reply shortly.
</div>
</div>
}
</div>
)}
</NetlifyForm>
<form name="contactform" action="/" data-netlify="true" data-netlify-honeypot="__bf">
<input type="hidden" name="form-name" value="contactform"><input type="text" name="__bf" style="display: none;">
<div>
<div class="jo-contact-form">
<h2 class="jo-contact-form-title">Contact</h2>
<div>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required"><label for="name">Your Name</label><input class="input100" type="text" name="name" placeholder="Enter your name" value=""><span class="focus-input100"></span></div>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz"><label for="email">Email</label><input class="input100" type="email" name="email" placeholder="Enter your email addess" value=""><span class="focus-input100"></span></div>
</div>
<div class="wrap-input100 validate-input" data-validate="Message is required"><label for="message">Message</label><textarea class="input100" name="message" placeholder="Your message here..."></textarea><span class="focus-input100"></span></div>
<div class="jo-link-button-wrapper">
<div class="jo-link-button undefined form">
<button type="submit" style="background-color: rgb(25, 25, 25); border: 1px solid rgb(25, 25, 25); color: white;">
<span class="button-text">Send</span>
<span class="button-arrow">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 476.213 476.213">
<polygon fill="white" points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 "></polygon>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
{（{加载，错误，成功}）=>(
{加载&&
加载。。。
}
{！加载&！成功&&
接触
你的名字
电子邮件
消息
}
{错误&&
您的信息未发送。请稍后再试。
}
{成功&&
谢谢你的留言！期待尽快回复。
}
)}
<NetlifyForm name='contactform'>
{({ loading, error, success }) => (
<div>
{loading &&
<div>Loading...</div>
}
{!loading && !success &&
<div className="jo-contact-form">
<h2 className="jo-contact-form-title">
Contact
</h2>
<div>
<div className="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
<label htmlFor="name">Your Name</label>
<input className={nameClasses} type="text" name="name" placeholder="Enter your name" value={name} onChange={this.handleChange}/>
<span className="focus-input100"></span>
</div>
<div className="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
<label htmlFor="email">Email</label>
<input className={emailClasses} type="email" name="email" placeholder="Enter your email addess" value={email} onChange={this.handleChange}/>
<span className="focus-input100"></span>
</div>
</div>
<div className="wrap-input100 validate-input" data-validate = "Message is required">
<label htmlFor="message">Message</label>
<textarea className={messageClasses} name="message" placeholder="Your message here..." value={message} onChange={this.handleChange}></textarea>
<span className="focus-input100"></span>
</div>
<LinkButton text="Send" linkType="form" />
</div>
}
{error &&
<div className="jo-contact-form-submission-message jo-contact-form-error">
<div>
Your information was not sent. Please try again later.
</div>
</div>
}
{success &&
<div className="jo-contact-form-submission-message jo-contact-form-success">
<div>
Thanks for the message! Expect a reply shortly.
</div>
</div>
}
</div>
)}
</NetlifyForm>
<form name="contactform" action="/" data-netlify="true" data-netlify-honeypot="__bf">
<input type="hidden" name="form-name" value="contactform"><input type="text" name="__bf" style="display: none;">
<div>
<div class="jo-contact-form">
<h2 class="jo-contact-form-title">Contact</h2>
<div>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required"><label for="name">Your Name</label><input class="input100" type="text" name="name" placeholder="Enter your name" value=""><span class="focus-input100"></span></div>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz"><label for="email">Email</label><input class="input100" type="email" name="email" placeholder="Enter your email addess" value=""><span class="focus-input100"></span></div>
</div>
<div class="wrap-input100 validate-input" data-validate="Message is required"><label for="message">Message</label><textarea class="input100" name="message" placeholder="Your message here..."></textarea><span class="focus-input100"></span></div>
<div class="jo-link-button-wrapper">
<div class="jo-link-button undefined form">
<button type="submit" style="background-color: rgb(25, 25, 25); border: 1px solid rgb(25, 25, 25); color: white;">
<span class="button-text">Send</span>
<span class="button-arrow">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 476.213 476.213">
<polygon fill="white" points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 "></polygon>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
接触
你的名字
电子邮件
消息
发送
基于Netlify仪表板中识别出的表单，以及我在提交时收到的成功消息，我希望提交的内容会显示在我的仪表板中，但那里什么都没有。我找到了一个解决方案，以防其他人遇到类似问题。事实证明，'content-type'头需要是'application/x-www-form-urlencoded'。我最终放弃了react netlify form包，并使用了这个适合我的组件
import React, {Component} from 'react';
import './Contact.css';
import LinkButton from '../LinkButton/LinkButton';
import qs from 'qs';
class Contact extends Component {
constructor(props){
super(props);
this.state = {
name: '',
email: '',
message: '',
canSubmit: false,
submitResponse: false
};
}
handleSubmit = e => {
e.preventDefault();
if (!this.state.canSubmit) {
return false;
}
let formData = {
"form-name": this.props.name,
"name": this.state.name,
"email": this.state.email,
"message": this.state.message,
}
fetch( window.location.href + "/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: qs.stringify(formData)
})
.then(
response => {
console.log(response)
console.log(response.status)
if (response.status > 199 && response.status < 300){
this.setState(prevState=>({
submitResponse: 'success'
}))
} else {
this.setState(prevState=>({
submitResponse: 'error'
}))
}
}
)
.catch(
error => {
console.log(error)
this.setState(prevState=>({
submitResponse: 'error'
}))
}
);
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
if ( this.state.name !== '' && this.state.email !== '' && this.state.message !== '') {
console.log('fields filled in');
this.setState(prevState => ({
canSubmit: true
}));
} else {
this.setState(prevState => ({
canSubmit: false
}));
}
}
render() {
const { name, email, message, canSubmit } = this.state;
let containerClasses = 'jo-contact-form-container';
if (!canSubmit) { containerClasses += ' inactive'; }
if (this.props.colorScheme == 'dark' ) containerClasses += ' dark-bg';
let nameClasses = 'input100';
if (name !== '') nameClasses += ' has-val';
let emailClasses = 'input100';
if (email !== '') emailClasses += ' has-val';
let messageClasses = 'input100';
if (message !== '') messageClasses += ' has-val';
return <div className="jo-contact-form">
<h2 className="jo-contact-form-title">Contact</h2>
{!this.state.submitResponse &&
<form name={this.props.name} method="post" onSubmit={this.handleSubmit} data-netlify-recaptcha="true">
<div className={containerClasses}>
<input type="hidden" name="form-name" value="contactpageform"/>
<div>
<div className="wrap-input100 rs1-wrap-input100 validate-input">
<label htmlFor="name">Your Name</label>
<input className={nameClasses} type="text" name="name" value={name} onChange={this.handleChange}/>
<span className="focus-input100"></span>
</div>
<div className="wrap-input100 rs1-wrap-input100 validate-input">
<label htmlFor="email">Your Email</label>
<input className={emailClasses} type="email" name="email" value={email} onChange={this.handleChange}/>
<span className="focus-input100"></span>
</div>
<div className="wrap-input100 validate-input">
<label htmlFor="message">Message</label>
<textarea className={messageClasses} name="message" onChange={this.handleChange} value={message}/>
<span className="focus-input100"></span>
</div>
{canSubmit && <LinkButton size="large" text="Send" linkType="form" />}
{!canSubmit && <LinkButton size="large" text="Send" linkType="form" inactive={true} />}
</div>
</div>
</form>
}
{this.state.submitResponse == 'success' &&
<div className="jo-contact-form-submission-message jo-contact-form-success">
<div>Thanks for the message! Expect a reply shortly.</div>
</div>
}
{this.state.submitResponse == 'error' &&
<div className="jo-contact-form-submission-message jo-contact-form-error">
<div>Your information was not sent. Please try again later.</div>
</div>
}
</div>
}
}
export default Contact;
import React，{Component}来自'React'；
导入“/Contact.css”；
从“../LinkButton/LinkButton”导入LinkButton；
从“qs”进口qs；
类接触扩展组件{
建造师（道具）{
超级（道具）；
this.state={
名称：“”，
电子邮件：“”，
消息：“”，
可以提交：错误，
次响应：错误
};
}
handleSubmit=e=>{
e、 预防默认值（）；
如果（！this.state.canSubmit）{
返回false；
}
设formData={
“表单名称”：this.props.name，
“name”：this.state.name，
“email”：this.state.email，
“消息”：this.state.message，
}
获取（window.location.href+“/”{
方法：“张贴”，
标题：{“内容类型”：“application/x-www-form-urlencoded”}，
正文：qs.stringify（formData）
})
.那么(
响应=>{
console.log（响应）
console.log（response.status）
如果（response.status>199&&response.status<300）{
this.setState（prevState=>({
提交回复：“成功”
}))
}否则{
this.setState（prevState=>({
提交响应：“错误”
}))
}
}
)
.接住(
错误=>{
console.log（错误）
this.setState（prevState=>({
提交响应：“错误”
}))
}
);
}
handleChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
如果（this.state.name！=''&&this.state.email！=''&&this.state.message！=''）{
console.log（“填写的字段”）；
this.setState（prevState=>({
可以提交：正确
}));
}否则{
this.setState（prevState=>({
可以提交：错误
}));
}
}
render（）{
const{name，email，message，canSubmit}=this.state；
让containerClasses='jo contact form container'；
如果（！canSubmit）{containerClasses+='inactive'；}
如果（this.props.colorScheme=='dark'）容器类+='dark bg'；
让nameClasses='input100'；
如果（name！=''）nameClasses+='具有val'；
让emailClasses='input100'；
如果（email！=''）emailClasses+='有val'；
让messageClasses='input100'；
如果（message！=''）messageClasses+='具有val'；
返回
接触
{！this.state.submitResponse&&
你的名字
你的电子邮件
消息
{canSubmit&&}
{！可以提交&}
}
{this.state.submitResponse=='success'&&
谢谢你的留言！期待尽快回复。
}
{this.state.submitResponse=='error'&&
您的信息未发送。请稍后再试。
}
}
}
导出默认联系人；