在React.js中创建我的第一个应用程序，并希望使用Ajax将联系表单提交到电子邮件中。我已将此解决方案用作准则：https
:
//liusashmily.wordpress.com/author/liusashmily/，但完整的组件文件不可用，只有部分内容，我无法联系作者。

接触组件

// Create Component

class Contact extends React.Component {

    constructor(props){

        super(props);

        this.state = {

            contactEmail: '',

            contactMessage: ''

        };



        this.handleSubmit = this.handleSubmit.bind(this);

        this.handleChange = this.handleChange.bind(this);

        this.handleChangeMsg = this.handleChangeMsg.bind(this);

    }



    handleChange(event) {

        this.setState({

            contactEmail: event.target.value,

        });

    }



    handleChangeMsg(event) {

        this.setState({

            contactMessage: event.target.value

        });

    }



    handleSubmit(event) {



        event.preventDefault();

        this.setState({

            type: 'info',

            message: 'Sending…'

        });



        $.ajax({



            url: 'php/mailer.php',

            type: 'POST',

            data: {

                'form_email': this.state.contactEmail,

                'form_msg': this.state.contactMessage

            },

            cache: false,

            success: function(data) {

                // Success..

                this.setState({

                    type: 'success',

                    message: 'We have received your message and will get in touch shortly. Thanks!'

                });

            }.bind(this),

            error: function(xhr, status, err) {

                this.setState({

                    type: 'danger',

                    message: 'Sorry, there has been an error.  Please try again later or visit us at SZB 438.'

                });

            }.bind(this)



        });

    }



    render() {

        return (

            <div className="contact">

                <form className="form" onSubmit={this.handleSubmit} id="formContact">

                    <label>Email</label>

                    <input id="formEmail" type="email" name="formEmail" value={this.state.contactEmail} onChange={this.handleChange} required />

                    <label>Meddelande</label>

                    <textarea id="formMsg" name="formMsg" rows="8" cols="40" value={this.state.contactMessage} onChange={this.handleChangeMsg} required></textarea>

                    <input type="submit" value="Submit" className="btn--cta" id="btn-submit" />

                </form>

            </div>

        )

    }

}

我的PHP文件mailer.php

<?php



if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // $name = strip_tags(trim($_POST[“form_name”]));

    // $name = str_replace(array(“\r”,”\n”),array(” “,” “),$name);

    $email = filter_var(trim($_POST["formEmail"]), FILTER_SANITIZE_EMAIL);

    $message = trim($_POST["formMsg"]);



    // Check that data was sent to the mailer.

    if ( empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {

        // Set a 400 (bad request) response code and exit.

        http_response_code(400);

        echo "Oops! There was a problem with your submission. Please complete the form and try again.";

        exit;

    }



    // Set the recipient email address.

    $recipient = "[email protected]";



    // Set the email subject.

    $subject = "New message from $email Via React Site";



    // Build the email content.

    $email_content .= "Email: $email\n\n";

    $email_content .= "Message: \n$message\n";



    // Build the email headers.

    $email_headers = "From: <$email>";



    // Send the email.

    if (mail($recipient, $subject, $email_content, $email_headers)) {

        // Set a 200 (okay) response code.

        http_response_code(200);

        echo "Thank You! Your message has been sent.";

    } else {

        // Set a 500 (internal server error) response code.

        http_response_code(500);

        echo "Oops! Something went wrong and we couldn’t send your message.";

    }



} else {

    // Not a POST request, set a 403 (forbidden) response code.

    http_response_code(403);

    echo "There was a problem with your submission, please try again.";

}



?>

在控制台日志中出现以下错误：

POST http：// localhost：8080 / php /
mailer.php 404（未找到）

..并说错误在“ jquery-3.2.1.min.js：4”文件中。

我在HTML文档中包含jQuery脚本：

<!Doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>

    <!-- <link rel="stylesheet" href="dist/styles.css"> -->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  </head>

  <body>

    <div id="app"></div>

    <script src="dist/bundle.js"></script>

  </body>

</html>

非常感谢任何输入！