介绍
在本指南中，我们将研究 Formspree - 一项为我们提供简单表单提交处理的服务。我们将了解如何使用 React 中的 ES6 语法将表单提交给 Formspree。
表格风潮
在构建静态网站时，您会遇到许多有关如何处理动态内容或表单提交的挑战。好吧，也许您会建议在联系表单提交中在表单操作中添加“mailto”链接。我们可以这样做，但这不会给用户带来极好的体验。用户需要切换到他们的电子邮件客户端，然后他们还必须点击发送按钮 - 这对于联系某人来说太麻烦了。
对于没有后端来处理表单提交的静态网站来说， Formspree是最好的服务。它对于不想投入太多资金的投资组合网站和初创公司非常有用。与其他替代方案（如 Google Form）不同，我们不需要通过使用与我们的联系表单用户界面 (UI) 不相符的 iframe 嵌入来自外部来源的表单来牺牲我们网站的外观。我们可以自己制作与我们网站完美契合的表单。
Formspree 仅要求我们有一个指向其 URL 的操作属性。URL 格式为https://formspree.io/{your email}，所有表单都将提交到您的电子邮件。首次提交表单时，Formspree 将发送一封确认电子邮件。请确保通过单击电子邮件中的链接进行确认，以从您的网站接收表单提交。
让我们创建联系表单
<form action="https://formspree.io/your-email@domain.com" method="POST">
<div className="input-group">
<label htmlFor="email">E-mail Address</label>
<input
type="email"
name="email"
id="email"
value={this.state.values.email}
onChange={this.handleInputChange}
title="Email"
required
/>
</div>
<div className="input-group">
<label htmlFor="message">Message</label>
<textarea
name="message"
id="message"
onChange={this.handleInputChange}
title="password"
required
>{this.state.values.message}</textarea>
</div>
<button type="submit">Send</button>
</form>
为了使用 AJAX 发送表单数据，我们必须添加提交处理程序并删除操作属性。
<form onSubmit={this.submitForm} >
...
<button type="submit">Send</button>
</form>
就像我之前的指南一样，在没有 jQuery AJAX 的情况下在 React 中提交表单，我们将拥有如下状态和处理程序：
this.state = {
values: {
email: "",
message: ""
},
isSubmitting: false,
isError: false
};
handleInputChange = e =>
this.setState({
values: { ...this.state.values, [e.target.name]: e.target.value }
});
submitForm = e => {
e.preventDefault();
// fetch() - post data to formspree url
}
在我之前的指南中，我们学习了如何使用 fetch() API 提交表单数据。对于那些不知道这是什么的人来说，这是基于 Promise 的新原生网络请求方法。
fetch(url, {...options})
.then(response => {
// resolve the data
})
.then(data => {
// use the data
});
对于本指南，我们将使用外部库 - axios为我们发出网络请求。
Axios
fetch 的问题在于我们需要两个步骤来获取数据并利用它。假设我们必须上传文件，fetch 将无法获取上传进度。因此对于这种情况，我们可以使用 Axios。
Axios 内部使用 XML HTTP 请求（XHR）并为我们抽象出复杂的语法并提供一种更简洁的方法。
基本用法
GET 请求示例
axios.get(url, {...options})
.then(response => {
// handle success
})
.catch(error => {
// handle error
})
POST 请求示例
axios.post(url, data, {...options})
.then(response => {
// handle success
})
.catch(error => {
// handle error
})
我们还可以将 async/await 与 Axios 一起使用：
const getData = async () => {
try {
const {data} = await axios.get(url);
return data;
} catch(err) {
console.log(err);
}
}
使用 Axios 的 submitForm() 处理程序
现在我们了解了 Axios 及其语法，让我们请求 Formspree URL。
submitForm = async e => {
e.preventDefault();
try {
const {data} = await axios.post("https://formspree.io/your-email@domain.com", {...this.state.values});
} catch (err) {
console.log(err);
}
完整代码
总结上面的所有代码，这里是本指南的完整源代码。
index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import "./styles.css";
class ContactForm extends Component {
constructor(props) {
super(props);
this.state = {
values: {
email: "",
message: ""
},
isSubmitting: false,
isError: false
};
}
submitForm = async e => {
e.preventDefault();
console.log(this.state);
this.setState({ isSubmitting: true });
try {
const {data} = await axios.post("https://formspree.io/your-email@domain.com", {...this.state.values});
} catch (err) {
console.log(err);
}
setTimeout(
() =>
this.setState({
isError: false,
message: "",
values: { email: "", password: "" }
}),
1600
);
};
handleInputChange = e =>
this.setState({
values: { ...this.state.values, [e.target.name]: e.target.value }
});
render() {
return (
<div>
<form onSubmit={this.submitForm}>
<div className="input-group">
<label htmlFor="email">E-mail Address</label>
<input
type="email"
name="email"
id="email"
value={this.state.values.email}
onChange={this.handleInputChange}
title="Email"
required
/>
</div>
<div className="input-group">
<label htmlFor="message">Message</label>
<textarea
name="message"
id="message"
onChange={this.handleInputChange}
title="password"
required
>{this.state.values.message}</textarea>
</div>
<button type="submit">Send</button>
</form>
<div className={`message ${this.state.isError && "error"}`}>
{this.state.isSubmitting ? "Submitting..." : this.state.message}
</div>
</div>
);
}
}
function App() {
return (
<div className="App">
<h1>Contact US</h1>
<ContactForm />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
样式.css
.App {
font-family: sans-serif;
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
button {
border: none;
padding: 8px 24px;
}
.message {
margin-top: 20px;
font-weight: 600;
}
.message.error {
color: red;
}
限制
不幸的是，Formspree 不允许免费用户通过 AJAX 调用其 URL 和访问其 API。因此，这些用户将不得不使用操作表单属性。
这就是本指南的全部内容。下次见，继续努力，像野兽一样编码。
参考
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
