使用Ajax在React.js中提交表单

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

Creating my first application in React.js and want to submit contact form to a email with Ajax. I've used this solution as guideline: https://liusashmily.wordpress.com/author/liusashmily/ but the full component file is not available, only parts and I cant reach the author.

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

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 = "mimilundberg@icloud.com";

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

?>

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

Getting following error in console log:

POST http://localhost:8080/php/mailer.php 404(不找到)

POST http://localhost:8080/php/mailer.php 404 (Not Found)

..并说"jquery-3.2.1.min.js:4"文件中存在错误.

..and it says that error is in the "jquery-3.2.1.min.js:4" file.

我在html doc中包含了jQuery脚本:

I'm including jQuery script in html doc:

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

非常感谢任何输入！