用 React 和 PHP 構(gòu)建一個(gè)聯(lián)系人表單

用 react 建立一個(gè)聯(lián)系表格，并在你的 PHP 或 Wordpress 網(wǎng)站上使用！

閱讀原文：Build a Contact Form with React and PHP——Build a contact form with React and use in your PHP or Wordpress Website!

有許多方法可以創(chuàng)建聯(lián)系人表單，從使用 HTML 和 JQuery，或 HTML 和 JavaScript，到選擇更現(xiàn)代的框架，如 React。

今天，我們將嘗試用現(xiàn)代的方式做一些稍微不同的事情。

在文章的結(jié)尾，你會(huì)得到一個(gè)完整的工作聯(lián)系表單，你可以把它整合到 Wordpress 或者你的 PHP 網(wǎng)站中。我還在 github 上發(fā)布了最終的項(xiàng)目，所以你可以下載來(lái)玩。

先決條件？不見(jiàn)得

對(duì)于本教程，您不必是 JavaScript、React 或 PHP 方面的專(zhuān)家?；局R(shí)足以掌握本教程的竅門(mén)。我也不會(huì)討論基本的細(xì)節(jié)，比如安裝 React 和編寫(xiě) CSS 代碼。

我們將只創(chuàng)建前端部分，但我將向您展示如何構(gòu)建后端部分。對(duì)于后端部分，您需要像 Apache 或 Nginx 這樣的 Web 服務(wù)器。只有基本的電子郵件發(fā)送將使用 PHP 完成。

對(duì)于 Mac 用戶(hù)來(lái)說(shuō)，安裝服務(wù)器的最快方法是下載并安裝 Mamp。我已經(jīng)安裝了帶 Nginx 的 Mamp。您不需要任何數(shù)據(jù)庫(kù)，因?yàn)槲覀冎皇窍蚰泥]箱發(fā)送電子郵件，而沒(méi)有將其保存在數(shù)據(jù)庫(kù)中。

好吧，我們開(kāi)始這個(gè)派對(duì)吧!

提示:通過(guò)與Bit共享，可以更快地構(gòu)建 React 組件。您的團(tuán)隊(duì)可以輕松共享組件、同步更改并在任何地方使用它們。試試看。

Bit - Share and build with code components
Bit helps you share, discover and use code components between projects and applications to build new features and…
bitsrc.io

創(chuàng)建 React app

你應(yīng)該在你的電腦上安裝create-react-app。如果你沒(méi)有，你可以通過(guò)npm安裝它。在你的控制臺(tái)上運(yùn)行如下。

npm install create-react-app

讓我們導(dǎo)航到控制臺(tái)中的項(xiàng)目文件夾。我的是:

cd ~/Sites/react-contact-form

要在文件夾中創(chuàng)建 React app，請(qǐng)運(yùn)行以下命令:

create-react-app .

這將需要幾秒鐘或幾分鐘。完成后，用你最喜歡的 IDE 或代碼編輯器打開(kāi)項(xiàng)目。我的是 VSCode。然后在./src/App.js文件夾中打開(kāi)文件App.js。你會(huì)看到這樣的情況:

0_rKQqMULttc7j74Qz.png

創(chuàng)建聯(lián)系人表單

讓我們清理一下。刪除 className 是App的 div 中的所有內(nèi)容?，F(xiàn)在，您的 render 方法應(yīng)該如下所示。

render() {
   return(
     <div className="App">
      </div>
   );
}

只是一個(gè)空的 div。

讓我們創(chuàng)建一個(gè)基本表單，包含姓和名的兩個(gè) text input，一個(gè)用于用戶(hù)電子郵件的 email input，一個(gè)用于消息的 textarea，當(dāng)然還有 submit button。

<p>Contact Me</p>
<div>
  <form action="/action_page.php">
    <label>First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name.." />
    <label>Last Name</label>
    <input
      type="text"
      id="lname"
      name="lastname"
      placeholder="Your last name.."
    />

    <label>Email</label>
    <input type="email" id="email" name="email" placeholder="Your email" />

    <label>Subject</label>
    <textarea
      id="subject"
      name="subject"
      placeholder="Write something.."
    ></textarea>
    <input type="submit" value="Submit" />
  </form>
</div>

現(xiàn)在你的 render 方法將如下所示：

render() {
  return (
    <div className="App">
    <p>Contact Me</p>
    <div>
    <form action="/action_page.php">
    <label>First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name.." />
    <label>Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name.." />


    <label>Email</label>
    <input type="email" id="email" name="email" placeholder="Your email" />


    <label>Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.."></textarea>
    <input type="submit" value="Submit" />
    </form>
    </div>
    </div>
  );
}

將基本樣式添加到表單中

默認(rèn)情況下，Create React app已經(jīng)導(dǎo)入了一個(gè) CSS 文件。您可以在文件夾./src中看到文件App.css。打開(kāi)它，刪除文件中的所有內(nèi)容。將此 CSS 代碼添加到文件中。我不會(huì)解釋 CSS 做了什么。但是這很基本，只是增加一些寬度和對(duì)齊。

* {
  box-sizing: border-box;
}
.App {
  max-width: 420px;
  margin: 0 auto;
}
p {
  text-align: center;
  font-weight: 500;
}
input[type='text'],
input[type='email'],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type='submit'] {
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type='submit']:hover {
  background-color: #45a049;
}
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

好吧。我不想讓你太困惑。我們做了一些編碼，但是還沒(méi)有看到任何輸出。所以讓我們保存所有東西，回到終端。在項(xiàng)目根文件夾中運(yùn)行:

npm start

這將打開(kāi)帶有localhost:3000端口的瀏覽器?，F(xiàn)在你可以看到我們可愛(ài)的小表單了。

0_ev-PpEEeFDyN-c5C.png

好吧，太好了?，F(xiàn)在是時(shí)候做些真正 React 的事了。

用 React 處理表單

現(xiàn)在我們有了一個(gè)基本的靜態(tài)的 React 表單。但是它還沒(méi)有做任何事情。我們需要一個(gè)初始 state 和提交處理 function。

表單 state

現(xiàn)在，我們將為表單添加一個(gè) state。我們應(yīng)該為此創(chuàng)建一個(gè) constructor:

constructor(props) {
  super(props);
  this.state = {
    fname: '',
    lname: '',
    email: '',
    message: '',
  }
}

然后我們需要我們的表單提交處理 function，如下所示:

handleFormSubmit( event ) {
  event.preventDefault();
  console.log(this.state);
}

現(xiàn)在，我們可以記錄該 state，看看是否所有值都保存在該 state 中。

最后，讓我們綁定表單 handler。

constructor(props) {
  super(props);
  this.state = {
    fname: '',
    lname: '',
    email: '',
    message: '',
  }
}

現(xiàn)在，我們必須將初始 state 設(shè)置為表單 input 值，每當(dāng)改變 input 時(shí)，我們都會(huì)將 state 設(shè)置為當(dāng)前 input 值。

在這一點(diǎn)上，我們像這樣改變我們的表單:

<form action="#" >
  <label>First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name.."
    value={this.state.fname}
    onChange={e => this.setState({ fname: e.target.value })}
  />
  <label>Last Name</label>
  <input type=" text" id="lname" name="lastname" placeholder="Your last name.."
    value={this.state.lname}
    onChange={e => this.setState({ lname: e.target.value })}
  />


  <label>Email</label>
  <input type="email" id="email" name="email" placeholder="Your email"
    value={this.state.email}
    onChange={e => this.setState({ email: e.target.value })}
  />


  <label>Message</label>
  <textarea id="message" name="message" placeholder="Write something.."
    onChange={e => this.setState({ message: e.target.value })}
    value={this.state.message}
  ></textarea>
  <input type="submit" onClick={e => this.handleFormSubmit(e)} value="Submit" />
</form >

如果你試圖在表單中寫(xiě)一些東西，并嘗試現(xiàn)在提交，你會(huì)在控制臺(tái)中看到你的數(shù)據(jù)。打開(kāi)控制臺(tái)，檢查它是否工作?？刂婆_(tái)輸出應(yīng)該如下所示：

{ "fname": "Malith", "lname": "Priyashan", "email": "me@melith.pro", "message": "Hey there. this is a silly message." }

用 PHP 發(fā)送一封電子郵件

好吧。我們幾乎完成了前端部分。現(xiàn)在，我們需要一種服務(wù)器端語(yǔ)言來(lái)將電子郵件發(fā)送到我們的郵箱。這次我選擇了 PHP。在我們開(kāi)始編寫(xiě)后端部分之前，讓我們向我們的 state 添加另外兩個(gè)屬性。我們需要添加{error and mailSent}。

this.state = {
  fname: '',
  lname: '',
  email: '',
  message: '',
  mailSent: false,
  error: null,
};

state 準(zhǔn)備好了。讓我們從 PHP 開(kāi)始。如果您已經(jīng)在 Apache 或 Nginx www文件夾中創(chuàng)建了 React app，您可以轉(zhuǎn)到項(xiàng)目根目錄，在聯(lián)系人文件夾中創(chuàng)建一個(gè)名為api/contact的文件夾。

創(chuàng)建index.php文件。我們的電子郵件功能將在這里使用。我想提一下，我們不會(huì)使用面向?qū)ο?OOP)的方法。但是如果你想要一個(gè)更干凈的 PHP 代碼，你可以稍微清理和改進(jìn)它。

從 React app 中，我們向 php api 發(fā)送了一個(gè) post 請(qǐng)求。在我們的聯(lián)系人表單中，名字和電子郵件應(yīng)該是必需的。因?yàn)樵?PHP 中，我們將檢查這兩個(gè)值。如果這兩個(gè)值為空，我們將拋出一個(gè)錯(cuò)誤。所以請(qǐng)記住這一點(diǎn)。

讓我們將這個(gè)代碼添加到你的index.php文件中。

<?php
header("Access-Control-Allow-Origin: *");
$rest_json = file_get_contents("php://input");
$_POST = json_decode($rest_json, true);

if (empty($_POST['fname']) && empty($_POST['email'])) die();

if ($_POST)
    {

    // set response code - 200 OK

    http_response_code(200);
    $subject = $_POST['fname'];
    $to = "me@malith.pro";
    $from = $_POST['email'];

    // data

    $msg = $_POST['number'] . $_POST['message'];

    // Headers

    $headers = "MIME-Version: 1.0\r\n";
    $headers.= "Content-type: text/html; charset=UTF-8\r\n";
    $headers.= "From: <" . $from . ">";
    mail($to, $subject, $msg, $headers);

    // echo json_encode( $_POST );

    echojson_encode(array(
        "sent" => true
    ));
    }
  else
    {

    // tell the user about error

    echojson_encode(["sent" => false, "message" => "Something went wrong"]);
    }

?>

基本上，我們正在做的是:我們正在檢查名字和電子郵件。然后使用 PHP mail()函數(shù)，我們將向我們的電子郵件賬戶(hù)發(fā)送一封包含聯(lián)系人表單數(shù)據(jù)的電子郵件。

現(xiàn)在，如果你導(dǎo)航到你的 api 文件夾 http://localhost/reactive-contact-form/api/contact

…你什么也不應(yīng)該看到。因?yàn)槿绻覀儾话l(fā)送名字和郵件來(lái)尋找 post 請(qǐng)求，我們的 api 死了。

將數(shù)據(jù)發(fā)送到 API

我們的 API 已經(jīng)準(zhǔn)備好了，現(xiàn)在是完成表單的時(shí)候了。所以我們需要發(fā)送已經(jīng)保存在 state 中的數(shù)據(jù)。我們可以使用 Javascript 的fetch來(lái)實(shí)現(xiàn)這一點(diǎn)。但是最近我使用了另一個(gè) npm 包，這個(gè)包在 React 中的 http requests 工作得非常有效。也許你已經(jīng)知道了Axios。所以我們需要先安裝這個(gè)軟件包。轉(zhuǎn)到控制臺(tái)中的 React app 文件夾。

并執(zhí)行：

npm install axios

太好了?，F(xiàn)在回到App.js，在文件頂部，你必須導(dǎo)入Axios。

import axios from 'axios';

導(dǎo)入 Axios 后，我們必須為 api 路徑創(chuàng)建一個(gè)常量。在 App 類(lèi)之前創(chuàng)建常量。

const API_PATH =
  'http://localhost:1992/react-contact-form/api/contact/index.php';

然后讓我們使用 HandleFormSubmit 方法中的 Axios 將數(shù)據(jù)發(fā)送到后端。

handleFormSubmit = e => {
  e.preventDefault();
  axios({
    method: 'post',
    url: `${API_PATH}`,
    headers: { 'content-type': 'application/json' },
    data: this.state,
  })
    .then(result => {
      this.setState({
        mailSent: result.data.sent,
      });
    })
    .catch(error => this.setState({ error: error.message }));
};

現(xiàn)在我們應(yīng)該可以通過(guò)我們的聯(lián)系表單發(fā)送電子郵件了。最后，讓我們?cè)谟脩?hù)發(fā)送電子郵件后向他們展示一條消息。

在表單結(jié)束標(biāo)記</form>之前，添加此標(biāo)記。

<div>{this.state.mailSent && <div>Thank you for contcting us.</div>}</div>

現(xiàn)在，我們的用戶(hù)能夠在發(fā)送電子郵件后看到一條消息。都搞定了！你和 reach 和 PHP 有一個(gè)可愛(ài)的小聯(lián)系方式。

從 github 下載代碼:

malithmcr/react-php-contact-form
Contact form using react and php. Contribute to malithmcr/react-php-contact-form development by creating an account on…
github.com

最終呈現(xiàn)

0_a2dD8wHSTVzBnZLH.png

總結(jié)

感謝你的閱讀！我希望這篇文章能提供一些見(jiàn)解，使用 React 和 PHP 創(chuàng)建一個(gè)簡(jiǎn)單的聯(lián)系人表單有多容易。我鼓勵(lì)你改變或嘗試改進(jìn) React 部分。也許甚至可以添加一個(gè) loader，玩玩 styling。

再次感謝你的閱讀！請(qǐng) star 給 github repo，一或兩個(gè)，我會(huì)非常高興！