用 React 和 PHP 构建一个联系人表单
用 react 建立一个联系表格，并在你的 PHP 或 Wordpress 网站上使用！
阅读原文：Build a Contact Form with React and PHP——Build a contact form with React and use in your PHP or Wordpress Website!
有许多方法可以创建联系人表单，从使用 HTML 和 JQuery，或 HTML 和 JavaScript，到选择更现代的框架，如 React。
今天，我们将尝试用现代的方式做一些稍微不同的事情。
在文章的结尾，你会得到一个完整的工作联系表单，你可以把它整合到 Wordpress 或者你的 PHP 网站中。我还在 github 上发布了最终的项目，所以你可以下载来玩。
先决条件？不见得
对于本教程，您不必是 JavaScript、React 或 PHP 方面的专家。基本知识足以掌握本教程的窍门。我也不会讨论基本的细节，比如安装 React 和编写 CSS 代码。
我们将只创建前端部分，但我将向您展示如何构建后端部分。对于后端部分，您需要像 Apache 或 Nginx 这样的 Web 服务器。只有基本的电子邮件发送将使用 PHP 完成。
对于 Mac 用户来说，安装服务器的最快方法是下载并安装 Mamp。我已经安装了带 Nginx 的 Mamp。您不需要任何数据库，因为我们只是向您的邮箱发送电子邮件，而没有将其保存在数据库中。
好吧，我们开始这个派对吧!
提示:通过与Bit共享，可以更快地构建 React 组件。您的团队可以轻松共享组件、同步更改并在任何地方使用它们。试试看。
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
创建 React app
你应该在你的电脑上安装create-react-app。如果你没有，你可以通过npm安装它。在你的控制台上运行如下。
npm install create-react-app
让我们导航到控制台中的项目文件夹。我的是:
cd ~/Sites/react-contact-form
要在文件夹中创建 React app，请运行以下命令:
create-react-app .
这将需要几秒钟或几分钟。完成后，用你最喜欢的 IDE 或代码编辑器打开项目。我的是 VSCode。然后在./src/App.js文件夹中打开文件App.js。你会看到这样的情况:
创建联系人表单
让我们清理一下。删除 className 是App的 div 中的所有内容。现在，您的 render 方法应该如下所示。
render() {
return(
);
}
只是一个空的 div。
让我们创建一个基本表单，包含姓和名的两个 text input，一个用于用户电子邮件的 email input，一个用于消息的 textarea，当然还有 submit button。
Contact Me
现在你的 render 方法将如下所示：
render() {
return (
Contact Me
);
}
将基本样式添加到表单中
默认情况下，Create React app已经导入了一个 CSS 文件。您可以在文件夹./src中看到文件App.css。打开它，删除文件中的所有内容。将此 CSS 代码添加到文件中。我不会解释 CSS 做了什么。但是这很基本，只是增加一些宽度和对齐。
* {
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;
}
好吧。我不想让你太困惑。我们做了一些编码，但是还没有看到任何输出。所以让我们保存所有东西，回到终端。在项目根文件夹中运行:
npm start
这将打开带有localhost:3000端口的浏览器。现在你可以看到我们可爱的小表单了。
好吧，太好了。现在是时候做些真正 React 的事了。
用 React 处理表单
现在我们有了一个基本的静态的 React 表单。但是它还没有做任何事情。我们需要一个初始 state 和提交处理 function。
表单 state
现在，我们将为表单添加一个 state。我们应该为此创建一个 constructor:
constructor(props) {
super(props);
this.state = {
fname: '',
lname: '',
email: '',
message: '',
}
}
然后我们需要我们的表单提交处理 function，如下所示:
handleFormSubmit( event ) {
event.preventDefault();
console.log(this.state);
}
现在，我们可以记录该 state，看看是否所有值都保存在该 state 中。
最后，让我们绑定表单 handler。
constructor(props) {
super(props);
this.state = {
fname: '',
lname: '',
email: '',
message: '',
}
}
现在，我们必须将初始 state 设置为表单 input 值，每当改变 input 时，我们都会将 state 设置为当前 input 值。
在这一点上，我们像这样改变我们的表单:
如果你试图在表单中写一些东西，并尝试现在提交，你会在控制台中看到你的数据。打开控制台，检查它是否工作。控制台输出应该如下所示：
{ "fname": "Malith", "lname": "Priyashan", "email": "[email protected]", "message": "Hey there. this is a silly message." }
用 PHP 发送一封电子邮件
好吧。我们几乎完成了前端部分。现在，我们需要一种服务器端语言来将电子邮件发送到我们的邮箱。这次我选择了 PHP。在我们开始编写后端部分之前，让我们向我们的 state 添加另外两个属性。我们需要添加{error and mailSent}。
this.state = {
fname: '',
lname: '',
email: '',
message: '',
mailSent: false,
error: null,
};
state 准备好了。让我们从 PHP 开始。如果您已经在 Apache 或 Nginx www文件夹中创建了 React app，您可以转到项目根目录，在联系人文件夹中创建一个名为api/contact的文件夹。
创建index.php文件。我们的电子邮件功能将在这里使用。我想提一下，我们不会使用面向对象(OOP)的方法。但是如果你想要一个更干净的 PHP 代码，你可以稍微清理和改进它。
从 React app 中，我们向 php api 发送了一个 post 请求。在我们的联系人表单中，名字和电子邮件应该是必需的。因为在 PHP 中，我们将检查这两个值。如果这两个值为空，我们将抛出一个错误。所以请记住这一点。
让我们将这个代码添加到你的index.php文件中。
";
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()函数，我们将向我们的电子邮件账户发送一封包含联系人表单数据的电子邮件。
现在，如果你导航到你的 api 文件夹 http://localhost/reactive-contact-form/api/contact
…你什么也不应该看到。因为如果我们不发送名字和邮件来寻找 post 请求，我们的 api 死了。
将数据发送到 API
我们的 API 已经准备好了，现在是完成表单的时候了。所以我们需要发送已经保存在 state 中的数据。我们可以使用 Javascript 的fetch来实现这一点。但是最近我使用了另一个 npm 包，这个包在 React 中的 http requests 工作得非常有效。也许你已经知道了Axios。所以我们需要先安装这个软件包。转到控制台中的 React app 文件夹。
并执行：
npm install axios
太好了。现在回到App.js，在文件顶部，你必须导入Axios。
import axios from 'axios';
导入 Axios 后，我们必须为 api 路径创建一个常量。在 App 类之前创建常量。
const API_PATH =
'http://localhost:1992/react-contact-form/api/contact/index.php';
然后让我们使用 HandleFormSubmit 方法中的 Axios 将数据发送到后端。
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 }));
};
现在我们应该可以通过我们的联系表单发送电子邮件了。最后，让我们在用户发送电子邮件后向他们展示一条消息。
在表单结束标记之前，添加此标记。
{this.state.mailSent && Thank you for contcting us.}
现在，我们的用户能够在发送电子邮件后看到一条消息。都搞定了！你和 reach 和 PHP 有一个可爱的小联系方式。
从 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
最终呈现
总结
感谢你的阅读！我希望这篇文章能提供一些见解，使用 React 和 PHP 创建一个简单的联系人表单有多容易。我鼓励你改变或尝试改进 React 部分。也许甚至可以添加一个 loader，玩玩 styling。
再次感谢你的阅读！请 star 给 github repo，一或两个，我会非常高兴！