我的联系表格是用 React 和 PHP return mailSent: false

Question

我是一名设计师，并且是编码初学者。我正在使用 React.js 创建我的投资组合，我正在尝试使用 PHP 创建一个联系表。我要求用户填写他的姓名、电子邮件和消息。

我正在研究 localhost:3000（如果该信息很重要，我不会）我有 2 个文件：contact.js 和 contact_form_handler.php，都在同一个目录中。当我提交表格时，我 console.log 状态，即 returns 用户填写的信息，但邮件仍未发送。编码对我来说是新的，所以也许我的问题听起来很愚蠢。我需要 Apache 服务器来运行 PHP 代码吗？我以为 React 有自己的 Node 服务器。

反应代码：

import React, { Component } from 'react';
import axios from 'axios';

const API_PATH = 'http://localhost:3000/src/contact_form_handler.php';

class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      message: '',
      mailSent: false,
      error: null
    }
  }

  render() {
    return(
      <div className="contact" id="contact">
        <h2>Contact</h2>
        <div>
          <form action="/contact_form_handler.php">
          <input 
            type="text" id="name" name="name" placeholder="Votre nom"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
          <input
            type="email" id="email" name="email" placeholder="Votre email"
            value={this.state.email}
            onChange={e => this.setState({ email: e.target.value })}
          />
          <textarea 
            id="message" name="message" placeholder="Votre message"
            onChange={e => this.setState({ message: e.target.value })}
            value={this.state.message}
          ></textarea>
          <input type="submit" onClick={e => this.handleFormSubmit(e)} value="ENVOYER"/>

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

  handleFormSubmit( event ) {
    event.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 }));
    console.log(this.state);
  }

}

export default Contact;

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['name'];
    $to = "blondeau.cyril@gmail.com";
    $from = $_POST['email'];

    // data

    $message = $_POST['name'] . $_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, $message, $headers);

    // echo json_encode( $_POST );

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

    // tell the user about error

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

?>

一切正常，但表格不起作用，我提交表格时没有收到电子邮件。

感谢您的帮助。

Answer 1

网络请求是异步的。 setState 也是异步的。您看不到即时的状态变化。

如果您想实际观察修改后的状态，请使用回调

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

  }

我的联系表格是用 React 和 PHP return mailSent: false

My contact form made with React and PHP return mailSent: false

contact-form

reactjs