我正在尝试使用 React.js联系表单实现 Netlify 表单

Question

我尝试了多种方法，但可以做任何事情。也提到了这篇文章 https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#troubleshooting-tips

但没有任何帮助。我该怎么做？

import React, { Component } from 'react';
import { Grid, Cell, List, ListItem, ListItemContent } from 'react-mdl';
import "bootstrap-css-only/css/bootstrap.min.css";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
}

class Contact extends Component {
constructor(props) {
super(props);
this.state = { name: "", email: "", message: "" };
}
handleSubmit = e => {
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact", ...this.state })
})
.then(() => alert("Success!"))
.catch(error => alert(error));
e.preventDefault();
};
handleChange = e => this.setState({ [e.target.name]: e.target.value });
render() {
return(
<div className="contact-body">
<Grid className="contact-grid">
<Cell col={12}>
<h2 style={{textAlign:"center", fontFamily:"Georgia", fontWeight:"bold", fontFamily:"Georgia", fontWeight:"bold"}}>Contact Me</h2>
<hr className="headinghr"/>
</Cell>
<Cell col={4}>
<div style={{textAlign:'center', paddingTop:'10px'}}>
<i style={{fontSize: '40px'}} className="fas fa-envelope-square" aria-hidden="true"/>
<h2 style={{fontSize:'190%', fontFamily: 'Anton', textAlign:'center'}}>E-mail</h2>
</div>
<div style={{fontFamily: 'Anton', textAlign:'center', fontSize:'20%'}}>
<h3 style={{fontSize:'650%'}}>[e-mail]</h3>
</div>
</Cell>
<Cell>
<form onSubmit={this.handleSubmit}>
<p>
<label>
Your Name: <input type="text" name="name" value={name} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Your Email: <input type="email" name="email" value={email} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Message: <textarea name="message" value={message} onChange={this.handleChange} />
</label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>`
</Cell>
</Grid>
</div>
)
}
}
export default Contact;```

Answer 1

我最近遇到了类似的问题，对我有用的是将此代码片段插入索引.html在id="root"之前

<!-- A little help for the Netlify post-processing bots -->
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>