使用 ES6 的 Formspree AJAX

2019-07-22 08:00:00 · 飞浪

让我们看看如何使用 React 中的 ES6 语法向 Formspree 提交简单的表单提交处理。

介绍

在本指南中，我们将研究 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。因此，这些用户将不得不使用操作表单属性。

这就是本指南的全部内容。下次见，继续努力，像野兽一样编码。

参考

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 ES6 的 Formspree AJAX

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<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>

handleInputChange = e => this.setState({ values: { ...this.state.values, [e.target.name]: e.target.value } }); submitForm = e => { e.preventDefault(); // fetch() - post data to 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); }

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);

.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; }